使用react-navigation管理反應本機中的狀態

我正嘗試在反應本機中創建待辦事宜應用程序。它具有一些額外的功能，如編輯現有任務和查看任務歷史記錄。我有一個嵌套在TabNavigator中的兩個StackNavigators - 但我很努力地找出應該如何將狀態傳遞給我的應用程序，然後一旦狀態/數據可用於應用程序，我應該如何更新應用程序狀態。使用react-navigation管理反應本機中的狀態

這裏是我的應用程序相關代碼：

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（）的函數，以便屏幕組件可以更新應用程序的狀態。

因爲我是所有這些的新手，我想確保我沒有采取不良做法。

任何人都可以幫助我瞭解這是否是正確的方法嗎？大量的文檔有時壓倒性的！提前致謝！

來源

2017-08-09 Chris_S

如果你想要一個集中的狀態，你應該嘗試一下。 Redux是一個全球不變的國家經理。

總結，在所有你的狀態存儲到一個「存儲」，它包裝您的頂級導航器。這家商店由許多「減速器」組成，這些減速器是持有您應用程序當前狀態的商品。您的組件使用縮減器接收的操作與那些將新狀態傳達給視圖並處理所需更改的操作進行通信。

如果您需要我添加更多詳情，請告訴我。在這裏，你有一些參考，爲您檢查：

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

教程從創建者：https://egghead.io

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

這應該讓你在正確的方向！祝你好運！

來源

2017-08-09 15:21:26 EnriqueDev

嗨！感謝您的幫助。這看起來像我需要的！ –

如果解決您的問題請記得接受答案;） – EnriqueDev

使用react-navigation管理反應本機中的狀態

回答

相關問題