先来看一下示意图
先来安利一下官方文档
还有不错的一个详解博客
安装步骤或者有什么属性之类的，看一下这个博客和官方文档，基本差不多了，现在我们来将跳转和传值的问题。
跳转
import { StackNavigator } from 'react-navigation';
导入必要的包的是关键。
StackNavigator是用于页面跳转的东西。
其次需要导入navigate。
利用navigate实现跳转，前面是 ‘xxx’ 你要跳转的名字，后面是你要传递的参数。
路由：明确跳转的方向。
代码
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
传值
代码中，我们已经向Chat传递了user的参数，那么Chat这个页面该如何接受参数呢？
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来接受参数。
而在Render里渲染的时候，通过
const { params } = this.props.navigation.state;
来得到params。之后直接params.user来接受参数。
回调传值
在实际场景中，第一个页面会向第二个页面传递值，第二个页面会处理这样的值，之后将值传递给第一个页面。。。
这就用到了回调传值。
直接帖代码
<Button
onPress={()=>navigate('Dsome',{
boom:this.state.boom,
callback: (data)=>{
this.setState({
boom:data,
})
}
}
)}
title="Dsome"
/>
这里我们通过Button传值给下一个页面。。这里，传递的值有boom，还有一个回调函数callback。如果得到的callback，我们就直接传给boom这个state。
第二个页面的处理也很简单。
定义一个goback方法，之后，const {navigate,goBack,state} = this.props.navigation;这个是关键。 在第二个页面,在goBack之前,将上个页面的方法取到,并回传参数,这样回传的参数会重走render方法
goback(){
const {navigate,goBack,state} = this.props.navigation;
state.params.callback(this.state.boom);
this.props.navigation.goBack();
}
这样就可以实现一开始的效果图，点击第二个页面，回到第一个页面实现boom的值的改变。
写的如果有不对的地方，请大神指教
