按钮单击事件时如何在功能组件中将值从一个选项卡传递到另一选项卡本机

问题描述

我正在创建三个选项卡，在第一个选项卡中有两个输入字段和按钮。 现在，在输入中输入值并单击按钮后，我必须将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
    
      
     }
    });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）