React Native 中下拉列表和 webview 组件之间传递值

Question

我正在使用 Snack.expo.dev 开发一个应用程序。在表单中，我有两个组件：下拉列表和网络视图。当我在下拉列表中选择一个网址时，网络视图会显示他的网页。 这是 DROPDOWNLIST.JS:

import React, { useState } from 'react';
  import { StyleSheet, Text, View, Alert } from 'react-native';
  import { Dropdown } from 'react-native-element-dropdown';
  import AntDesign from '@expo/vector-icons/AntDesign';
  import DropDownPicker from 'react-native-dropdown-picker';

  
  const data = [
    { label: 'Python', value: 'https://python.org' },
    { label: 'Java', value: '   https://microsoft.com' },
    { label: 'Swift', value: 'https://swift.org' },
    { label: 'Kotlin', value: 'https://kotlinlang.org' },
    
  ];
  
  const DropdownComponent = () => {
    const [value, setValue] = useState(null);
    const [isFocus, setIsFocus] = useState(false);
    const [url, setUrl] = useState('');
    const renderLabel = () => {
      if (value || isFocus) {
        return (
          <Text style={[styles.label, isFocus && { color: 'blue' }]}>
            
          </Text>
        );
      }
      return null;
    };

    return (
      <View style={styles.container}>
       
        <Dropdown
          style={[styles.dropdown, isFocus && { borderColor: 'blue' }]}
          placeholderStyle={styles.placeholderStyle}
          selectedTextStyle={styles.selectedTextStyle}
          inputSearchStyle={styles.inputSearchStyle}
          iconStyle={styles.iconStyle}
          data={data}
          search
          maxHeight={'100%'}
          
          labelField="label"
          valueField="value"
          placeholder={!isFocus ? 'Select item' : ''}
          searchPlaceholder="Search..."
          value={value}
          onFocus={() => setIsFocus(true)}
          onBlur={() => setIsFocus(false)}
           onChange={item => {
            setValue(item.value);
            setIsFocus(false);
            Alert.alert(item.value)
          }}
          
        />
      </View>
    );
  };

  export default DropdownComponent;
  

  const styles = StyleSheet.create({
    container: {
      backgroundColor: 'white',
      padding: 2,
    },
    dropdown: {
      height: 40,
      borderColor: 'gray',
      borderWidth: 0.5,
      borderRadius: 8,
      paddingHorizontal: 8,
      width:'100%',
    },
    icon: {
      marginRight: 5,
    },
    label: {
      position: 'absolute',
      backgroundColor: 'white',
      left: 22,
      top: 8,
      zIndex: 999,
      paddingHorizontal: 8,
      fontSize: 14,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 16,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
    inputSearchStyle: {
      height: 40,
      fontSize: 16,
    },
  });

这是WEBVIEWER.JS：

import React, { Component } from 'react';
import { StyleSheet, Text, View, Alert } from 'react-native';
import { WebView } from 'react-native-webview';
import mainUrl from './DropdownList'

// ...
export default function WebViewer() {
  return <WebView source={{ uri: mainUrl }} style={{ width:'100%' }} />;
}

这是调用上面组件的 MAINFORM.JS：

import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, Dimensions, StatusBar } from 'react-native';

import ToolBar from './ToolBar';
import WebViewer from './WebViewer'

const Header =()=> {
  return (
    <View style={styles.header}>
      <ToolBar/>  
    </View>
  )
}
const Box =()=> {
  return (
    <View style={styles.box}>
      <WebViewer/>
    </View>
  )
}

export default function MainForm() {
  return (
   <View style={styles.container}> 
    <Header/>
    <Box/>
    </View>
  );
}

const styles = StyleSheet.create({
  
  container: {
    flex:1,
  },

  header: {
    width:'100%',
    height:54,
  },

  box: {
    width:'100%',
    height:'100%',
    }
  
});

MainForm 是下拉列表和 webview 组件的父组件。 如何将 url 从 dropdownlist 传递到 webview？ 有什么想法吗？

编辑： 好的，我尝试自己执行以下操作：useContext。

我想使用上下文： 在主窗体

const Context = createContext(null);

function MainForm() {
   const [url, setUrl] = useState(null);
  return (
   
    <Context.Provider value= {url}>
   <View style={stylesForm.container}> 
    <Header/>
    <Box/>
    </View>
   </Context.Provider>
  )
}

const Header =()=> {
  return (
    <View style={stylesForm.header}>
      <ToolBar/>  
    </View>
  )
}

const Box =()=> {
  return (
    <View style={stylesForm.box}>
      <WebViewer/>
    </View>
  )
}

然后在DropDownlist：

const DropdownList= () => {

    const myUrl = useContext(Context);
    
    const [value, setValue] = useState(null);
    const [isFocus, setIsFocus] = useState(false);
    //const [url, setUrl] = useState('');
    const renderLabel = () => {
      if (value || isFocus) {
        return (
          <Text style={[styles.label, isFocus && { color: 'blue' }]}>
          </Text>
        );
      }
      return null;
    };
    return (
      <View style={styles.container}>
        <Dropdown
          style={[stylesDropdown.dropdown, isFocus && { borderColor: 'blue' }]}
          placeholderStyle={stylesDropdown.placeholderStyle}
          selectedTextStyle={stylesDropdown.selectedTextStyle}
          inputSearchStyle={stylesDropdown.inputSearchStyle}
          iconStyle={stylesDropdown.iconStyle}
          data={data}
          search
          maxHeight={'100%'}
          labelField="label"
          valueField="value"
          placeholder={!isFocus ? 'Select item' : ''}
          searchPlaceholder="Search..."
          value={value}
          onFocus={() => setIsFocus(true)}
          onBlur={() => setIsFocus(false)}
          onChange={item => {
            setValue(item.value);
            setIsFocus(false);
            
            myUrl.setUrl(item.value);
            Alert.alert(url);
          }}
        />
      </View>
    );
  };

MainForm 嵌入了 ToolBar 和 Webviewer，并且 Toolbar 嵌入了 DropdownList。 在 Dropdownlist 的 onChange 属性中，我想用 Alert 语句显示 url，看看它是否正确，但是当我运行时，它会显示错误消息

"Cannot read property 'setUrl' of null"

为什么？我有什么错吗？ 请帮助我。

Answer 1

好的，我通过以下方式解决：

1. 我在 UrlProvider.js 中添加了一个新组件 UrlContext：

import React, { createContext, useContext, useState, useEffect } from 'react';

const Context = createContext();
const UrlContext = (props) => {
    const [url, setUrl]= useState('');
    return (
        <Context.Provider value={{url, setUrl}}>
            {props.children}
        </Context.Provider>
    );
}

export {Context, UrlContext }

2. 在 App.js 中：

export default function App() {
  
  return (
    <UrlContext>
      <View style={styles.container}>
        <MainForm />
      </View>
      </UrlContext>
  );
}

3. 在下拉列表中：

 const DropdownList= () => {
    
    const {url, setUrl} = useContext(Context);

    return (
    
      <View style={styles.container}>
        <Dropdown
           onChange={item => {
            
            setUrl(item.value);

         }}
        />
      </View>
      
    );
  };

4. 在网页视图中：

function WebViewer() {
     const {url, setUrl} = useContext(Context);
  
  return <WebView source={{ uri:url}} style={{ width:'100%',backgroundColor:'white', }} />;
}