如何在本機反應中將值從一個選項卡發送到另一個選項卡

Question

在我的代碼中，我正在制作樹形標簽，在第一個標簽上有兩個輸入字段和按鈕。 現在在輸入中輸入值並單擊按鈕后，我必須將值發送到其他選項卡。 就像在名稱字段中一樣，我正在輸入名稱“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,
        height: 40,
     },
     submitButtonText:{
        color: 'white',
        alignSelf:'center',
        justifyContent:'center',
        borderRadius:20
    
      
     }
    });

Answer 1

最短的答案是嘗試使用state 。 使用狀態並將 state 從父母傳遞給孩子可能是您的最佳選擇。 這是您可以了解它的一種方法 go

第一個在您的TabViewExample中添加一個useState()掛鈎以保留表單數據並將您的renderScene()更改為 function，不要使用 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()作為 function 的原因在“react-native-tab-view”文檔中有更詳細的解釋。 簡而言之，當您需要將道具傳遞給組件時，您不應使用上面使用的SceneMap() ，而是將 renderScene 轉換為 function 並使用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 state 將自動更新，因此當您轉到/滑動到第 2 頁時，您應該會看到您在第 1 頁的第一個 TextInput 上鍵入的任何內容。

PS：這只是一個簡短的解釋，所以我只是為您提供了跨選項卡/組件共享數據的基本思想。 在您的代碼中，您可以為這些按鈕創建更簡潔的表單處理函數和處理函數。 我本可以做到的，但我會把這份工作留給你，因為這不是你最初問題的一部分。 希望這會有所幫助，如果您需要更詳細/深入的回復，請告訴我。

PS 2：如果您使用我當前的示例，請不要單擊按鈕，否則會出現錯誤，因為您沒有處理程序 function，只需在輸入中鍵入 go 即可查看結果。