[英]How to send value from one tab to another tab in react native
在我的代码中,我正在制作树形标签,在第一个标签上有两个输入字段和按钮。 现在在输入中输入值并单击按钮后,我必须将值发送到其他选项卡。 就像在名称字段中一样,我正在输入名称“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
}
});
最短的答案是尝试使用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 即可查看结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.