react-navigation学习(一)跳转和传值问题

先来看一下示意图

chuan.gif

先来安利一下官方文档

还有不错的一个详解博客

安装步骤或者有什么属性之类的，看一下这个博客和官方文档，基本差不多了，现在我们来将跳转和传值的问题。

跳转

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的值的改变。

写的如果有不对的地方，请大神指教