如何在本机反应中将值从一个选项卡发送到另一个选项卡

Question

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

 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,
        height: 40,
     },
     submitButtonText:{
        color: 'white',
        alignSelf:'center',
        justifyContent:'center',
        borderRadius:20
    
      
     }
    });

Answer 1

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

在你的 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) 使用 renderScene() 作为函数的原因在"react-native-tab-view" 文档中有更详细的解释。简而言之，当您需要将道具传递给组件时，您不应该使用上面使用的 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)}
           />
...

对于第二条路线：

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

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

PS：这只是一个简短的解释，所以我只是为您提供了跨选项卡/组件共享数据的基本概念。在您的代码中，您可以为这些按钮创建更简洁的表单处理函数和处理函数。我本可以做到的，但我会把这份工作留给你，因为这不是你最初问题的一部分。希望这会有所帮助，如果您需要更详细/深入的回复，请告诉我。

PS 2：如果您使用我当前的示例，请不要单击按钮，否则您会收到错误，因为您没有处理程序函数，只需输入输入并转到第二页查看结果。