![](/img/trans.png)
[英]send child component's state to another component as props via tab navigator in react native
[英]React Native: Send component state to other component using Tab Navigator
我有一个添加待办事项的组件AddTodo可以正常工作,并用添加的待办事项更新状态,并且我有一个组件TodoItems在<FlatList/>
显示<FlatList/>
。 我正在使用React Native Tab Navigator在组件之间切换,但是我不确定如何将状态this.state.todos
从AddTodo组件发送到TodoItems组件。
我一直在研究,但是在Tab Navigator中找不到解决方案,但是Stack Navigator有很多解决方案。
组件AddTodo
export default class AddTodo extends Component {
constructor(props) {
super(props);
this.state = {
todoText: null,
todos: []
}
}
onAdd = () => {
if (this.state.todoText) {
this.state.todos.push({'todoItem': this.state.todoText});
this.setState({todos: this.state.todos});
}
}
render() {
return(
<View>
<TextInput onChangeText={(text) => {
this.setState({todoText: text});
}} />
<TouchableOpacity onPress={() => {
this.onAdd;
}}>
</View>
);
}
}
组件TodoItems
export default class TodoItems extends Component {
constructor(props) {
super(props);
this.state = {
todosList: []
}
}
render() {
return(
<View>
<FlatList
data={this.state.todosList}
renderItem={(item, index) => {
<Text>{item.todoItem}</Text>
}}
/>
</View>
);
}
}
组件标签
import {TabNavigator} from 'react-navigation';
import AddTodo from "./AddTodo";
import TodoItems from "./TodoItems";
var myTabs = TabNavigator(
{
'AddTodo':{screen: AddTodo,},
'TodoItems':{screen: TodoItems, },
},
{
tabBarPosition: 'top',
swipeEnabled: false,
tabBarOptions: {
labelStyle:{
fontSize: 13,
fontWeight: 'bold',
},
indicatorStyle: {
borderBottomColor: '#003E7D',
borderBottomWidth: 2,
},
style:{
backgroundColor: '#F30076',
elevation: 0,
},
},
});
export default myTabs;
好吧,我认为您有两种选择:
或者,您可以在AddTodo中渲染TodoItems:
render() { return( <View> <TextInput onChangeText={(text) => { this.setState({todoText: text}); }} /> <TouchableOpacity onPress={() => { this.onAdd; }}> </View> <TodoItems data={this.state.todos} /> ); }
然后,您可以从TodoItems中访问该数据:希望这会有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.