Question

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

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

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中，你所有的状态都存储在一个“商店”中，它包裹你的顶级导航器。这个商店由许多“Reducers”组成，这些“Reducers”是持有你应用程序当前状态的“Reducers”。您的组件使用操作与商店进行通信，这些操作由Reducer接收，并将新状态传达给您的视图并处理所需的更改。

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

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

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

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

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

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

1 个答案: