如何在React Native中将值从一个选项卡发送到另一个选项卡

如何解决如何在React Native中将值从一个选项卡发送到另一个选项卡

在我的代码中，我正在制作树形选项卡，在第一个选项卡上，有两个输入字段和按钮。 现在，在输入中输入值并单击按钮后，我必须将vale发送到其他选项卡。 像在名称字段中一样，我输入名称“ Abhi”，然后单击按钮，此Abhi应该反映在选项卡2上。 与“动物”字段中一样，该“动物”应反映在第三个选项卡上。 请帮忙

 import * as React from 'react';
    import { View,StyleSheet,Dimensions,Text,TextInput,TouchableOpacity } from 'react-native';
    import { TabView,SceneMap } from 'react-native-tab-view';
     
    const FirstRoute = () => (
      <View style={[styles.scene,{ backgroundColor: '#FFFFFF' }]} >
        <View  style={{}}>
        <Text style={{margin:15}}>Name </Text>
        <TextInput style={styles.input}
                   underlineColorAndroid = "transparent"
                   placeholder = "Name"
                   placeholderTextColor = "#9a73ef"
                   autoCapitalize = "none"
                   onChangeText={text => onChangeText(text)}
                  />
        <TouchableOpacity
                   style = {styles.submitButton}
                   onPress = {
                      () => this.Name()
                   }>
                   <Text style = {styles.submitButtonText}> Submit </Text>
                </TouchableOpacity>
                </View>
    
                <View style={{}}>
        <Text style={{margin:15}}> Favorite Animal  </Text>
        <TextInput style={styles.input}
                   underlineColorAndroid = "transparent"
                   placeholder = "Favorite Animal"
                   placeholderTextColor = "#9a73ef"
                   autoCapitalize = "none"
                   onChangeText={text => onChangeText(text)}
                  />
        <TouchableOpacity
                   style = {styles.submitButton}
                   onPress = {
                      () => this.Animal()
                   }>
                   <Text style = {styles.submitButtonText}> Submit </Text>
                </TouchableOpacity>
                </View>
    
      </View>
    );
     
    const SecondRoute = () => (
      <View style={[styles.scene,{ backgroundColor: '#FFFFFF' }]} >
    <Text> {'Name' }</Text>
    </View>
    );
     
    const ThirdRoute = () => (
      <View style={[styles.scene,{ backgroundColor: '#FFFFFF' }]} >
        <Text> {"Favorite Animal "}</Text>
      </View>
    );
    
    const initialLayout = { width: Dimensions.get('window').width };
     
    export default function TabViewExample() {
      const [index,setIndex] = React.useState(0);
      const [routes] = React.useState([
        { key: 'first',title: 'First' },{ key: 'second',title: 'Second' },{ key: 'third',title: 'Third' },]);
     
      const renderScene = SceneMap({
        first: FirstRoute,second: SecondRoute,third:ThirdRoute
      });
     
      return (
        <TabView
          navigationState={{ index,routes }}
          renderScene={renderScene}
          onIndexChange={setIndex}
          initialLayout={initialLayout}
        />
      );
    }
     
    const styles = StyleSheet.create({
      scene: {
        flex: 1,},container: {
        paddingTop: 23
     },input: {
        margin: 15,height: 40,borderColor: '#7a42f4',borderWidth: 1
     },submitButton: {
        backgroundColor: '#65D370',padding: 10,margin: 15,submitButtonText:{
        color: 'white',alignSelf:'center',justifyContent:'center',borderRadius:20
    
      
     }
    });

解决方法

最短的答案是尝试使用状态。使用状态并将状态从父级传递到子级可能是您的最佳选择。这是解决问题的一种方法。

在您的 TabViewExample 中的第一个添加 useState（）钩子以保留表单数据，并将 renderScene（）更改为函数请勿使用SceneMap 。示例：

...
    const [name,setName] = React.useState(undefined);
      
        const renderScene = ({ route }) => {
          switch (route.key) {
            case "first":
              return <FirstRoute setName={setName} />;
            case "second":
              return <SecondRoute name={name} />;
            case "third":
              return <ThirdRoute />;
            default:
              <FirstRoute setName={setName} />;
          }
        };

（A）在"react-native-tab-view"文档中更详细地说明了使用 renderScene（）作为函数的原因。简而言之，当您需要将道具传递给组件时，请勿使用上面使用的 SceneMap（），而是将renderScene转换为函数并使用 switch 。

（B）我们仅将 setName 传递给第一个组件，因为这就是我们要使用的。

2nd-在组件中使用道具。所以现在他们看起来或多或少是这样的：

    const FirstRoute = props => (
       <View style={[styles.scene,{ backgroundColor: "#FFFFFF" }]}>                                                                                   
         <View style={{}}>
           <Text style={{ margin: 15 }}>Name </Text>
           <TextInput
             style={styles.input}
             underlineColorAndroid="transparent"
             placeholder="Name"
             placeholderTextColor="#9a73ef"
             autoCapitalize="none"
             onChangeText={text => props.setName(text)}
           />
...

对于SecondRoute：

const SecondRoute = props => (
   <View style={[styles.scene,{ backgroundColor: "#FFFFFF" }]}>
     <Text> {props.name}</Text>
   </View>
 );

因此，现在当您更改FirstRoute中的第一个Input时，name状态将自动更新，因此当您转到或滑动到第2页时，您应该会看到在第1页的第一个TextInput上键入的内容。

PS：这只是一个简短的解释，所以我只是向您提供了跨选项卡/组件共享数据的基本思想。您可以在代码上创建更简洁的表单处理程序函数和这些按钮的处理函数。我本可以做到的，但我将把这份工作留给您，因为这不是您最初提出的问题。希望这会有所帮助，并让我知道您是否需要更详细/深入的答复。

PS 2：如果使用我的当前示例，请不要单击按钮，否则将由于没有处理程序功能而出错，只需在输入中键入内容并转到第二页即可查看结果。