如何解决按钮单击事件时如何在功能组件中将值从一个选项卡传递到另一选项卡本机
我正在创建三个选项卡,在第一个选项卡中有两个输入字段和按钮。 现在,在输入中输入值并单击按钮后,我必须将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 举报,一经查实,本站将立刻删除。