先來看一下示意圖

chuan.gif

先來安利一下官方文檔

還有不錯的一個詳解博客

安裝步驟或者有什么屬性之類的，看一下這個博客和官方文檔，基本差不多了，現(xiàn)在我們來將跳轉(zhuǎn)和傳值的問題。

跳轉(zhuǎn)

import { StackNavigator } from 'react-navigation';
導入必要的包的是關(guān)鍵。
StackNavigator是用于頁面跳轉(zhuǎn)的東西。
其次需要導入navigate。

利用navigate實現(xiàn)跳轉(zhuǎn)，前面是 ‘xxx’ 你要跳轉(zhuǎn)的名字，后面是你要傳遞的參數(shù)。

路由：明確跳轉(zhuǎn)的方向。

代碼

 const { navigate } = this.props.navigation;
        <Button
          onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
        
 const SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
    Chat: { screen: ChatScreen },
    Dsome:{screen:Dsome},
});

頁面效果參考上面的GIF

傳值

代碼中，我們已經(jīng)向Chat傳遞了user的參數(shù)，那么Chat這個頁面該如何接受參數(shù)呢？

class ChatScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  render() {
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      
      </View>
    );
  }
}     

在navigationOptions 中可以通過接受一個 navigation 之后通過navigation.state.params.user來接受參數(shù)。

而在Render里渲染的時候，通過

const { params } = this.props.navigation.state;

來得到params。之后直接params.user來接受參數(shù)。

回調(diào)傳值

在實際場景中，第一個頁面會向第二個頁面?zhèn)鬟f值，第二個頁面會處理這樣的值，之后將值傳遞給第一個頁面。。。

這就用到了回調(diào)傳值。
直接帖代碼

    <Button 
      onPress={()=>navigate('Dsome',{
        boom:this.state.boom,
          callback: (data)=>{
                this.setState({
                  boom:data,
                })
                 }
      }
       )}
      title="Dsome"
    />

這里我們通過Button傳值給下一個頁面。。這里，傳遞的值有boom，還有一個回調(diào)函數(shù)callback。如果得到的callback，我們就直接傳給boom這個state。

第二個頁面的處理也很簡單。
定義一個goback方法，之后，const {navigate,goBack,state} = this.props.navigation;這個是關(guān)鍵。 在第二個頁面,在goBack之前,將上個頁面的方法取到,并回傳參數(shù),這樣回傳的參數(shù)會重走render方法

 goback(){
    const {navigate,goBack,state} = this.props.navigation;
    state.params.callback(this.state.boom);
    this.props.navigation.goBack();  
}

這樣就可以實現(xiàn)一開始的效果圖，點擊第二個頁面，回到第一個頁面實現(xiàn)boom的值的改變。

寫的如果有不對的地方，請大神指教