使用 react-navigation 时在 react-native 中管理状态

Question

我正在尝试在 react-native 中创建一个待办事项应用程序。它有一些额外的功能，例如编辑现有任务和查看任务历史记录。我有两个嵌套在 TabNavigator 中的 StackNavigators - 但我正在努力找出我应该如何将状态传递到我的应用程序中，然后一旦 state/data 可用于应用程序，我应该如何更新申请状态。

这是我的应用程序的相关代码：

export default class App extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            data: [

                //Array of to-do objects here.
            ]
        }
    }

    updateAppData(id, ){

    //define function that wraps this.setState(). This will be passed into 
    application to update application state.
    }

    render(){
        return(
            <Root screenProps={this.state}/>
        )
    }
}

//make Todos Stack-Nav section to sit inside tab1
const TodosWrapper = StackNavigator({

    CurrentTodos: { screen: CurrentTodos },
    Details: { screen: Details},
    EditTodo: { screen: EditTodo},
    AddNewTodo: { screen: AddNewTodo}

})

//make History Stack-Nav section to sit inside tab2
const HistoryWrapper = StackNavigator({

    CompletedTodos: { screen: CompletedTodos },
    CompletedDetails: { screen: CompletedDetails }

})

//Make main tab navigation that wraps tabs 1 and 2
const Root = TabNavigator({

    Todos : { 
        screen: TodosWrapper,
        title: "Open Tasks"
    },
    History: { screen: HistoryWrapper }
})

然后我想将我的应用程序的状态传递到我的屏幕中，如下图所示：

export default class CurrentTodos extends React.Component {

static navigationOptions = {
    header: null
}
render(){
    const { navigate } = this.props.navigation;
    let { data } = this.props.screenProps;
    data = data.map( (item, id) => (

            <ListItem style={styles.listItem} key={"_"+id}>
                <View style={styles.textWrapper}>
                    <Text style={styles.listItemTitle}>{item.title}</Text>
                    <Text note>{ item.isComplete ? "Complete" : "In Progress" }</Text>
                    <Text note>{item.description}</Text>
                </View>
                <View>
                    <Button
                        onPress={() => this.props.navigation.navigate('Details')}
                        title="Full Details"
                        style={styles.fullDetails}
                    />
                </View>
            </ListItem>
        ) 
    );

    return (
        <ScrollView style={styles.scrollView}>
            <View style={styles.viewHeader}>
                <Text style={styles.title}>
                    Current Tasks
                </Text>
                <Text 
                    style={styles.addNew}
                    onPress={() => navigate("AddNewTodo")}
                >
                    +
                </Text>
            </View>
            <List>
                {data}
            </List>
        </ScrollView>
    )
}

}

我目前正计划使用 screenProps={this.state} 将状态传递到我的屏幕，然后还传递一个包装 this.setState() 的函数，以便屏幕组件可以更新应用程序的状态.

由于我是这一切的新手，我想确保我不会接受不良做法。

谁能帮我看看这是否是正确的方法？大量的文档有时会让人不知所措！提前致谢！

Answer 1

如果你想要一个中心化的状态，你一定要试试 redux。 Redux 是一个全局不可变的状态管理器。

总而言之，在 redux 中，你所有的状态都存储在一个 "Store" 中，它包装了你的顶级导航器。该商店由许多 "Reducers" 组成，它们保存着您应用程序的当前状态。您的组件使用 actions 与 store 通信，reducer 接收这些 actions 并将新状态传达给您的视图并处理所需的更改。

如果您需要我添加更多详细信息，请告诉我。在这里你有一些参考资料供你检查：

官方网站： http://redux.js.org

来自创作者的教程： https://egghead.io

课程： https://www.udemy.com/the-complete-react-native-and-redux-course/

这应该能让您朝着正确的方向前进！祝你好运！

使用 react-navigation 时在 react-native 中管理状态

Managing state in react-native when using react-navigation

react-native

react-navigation