React Navigation 入门(二) - StackNavigator 的使用与传递参数

前端之家收集整理的这篇文章主要介绍了React Navigation 入门(二) - StackNavigator 的使用与传递参数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

RN 版本:0.50
操作环境:Windows 10
React Navigation 版本:1.0.0-beta.20

文章同步自简书:http://www.jianshu.com/p/acf137a41c7b

上一篇文章《StackNavigator 快速入门》中,介绍了 StackNavigator 的快速使用方法,本篇在其基础上进行补充,对 StackNavigator 进行更加详细的介绍。

StackNavigator 的介绍

我们依然是先写个首页用来展示:

export default class HomeScreen extends Component {

  static navigationOptions = {
    title: 'Welcome'
  }

  render() {
    return <Text>Hello,Chat App!</Text>;
  }
}

然后通过 StackNavigator 进行注册

const RootNavigator = StackNavigator({ Home: { screen: HomeScreen,} });

可以发现,这里设置 title 的方式和上一篇不一样了。上一篇中,我们在对 HomeScreen 进行注册的时候进行了 headerTitle 的设置,就像下面这样。

const RootNavigator = StackNavigator({
  Home: {
    screen: HomeScreen,navigationOptions: {
      headerTitle: 'Home'
    }
  });

而在这篇文章中,我们把 navigationOptions 单独拿了出来写成了一个静态变量。这种写法也是可以的,当通过 StackNavigator 加载到 Home 页面的时候,会自动找到这个变量读取它的各个参数并应用在 Home 页面上。就像组件的生命周期刚开始的时候会先读取 static defaultProps 中的默认属性

另外在这里 headerTitletitle效果是一样的,都是顶部 ‘ToolBar’ 的标题。它们两个具体有什么区别,打算在下一篇文章再做介绍。效果图直接用官网的。

添加一个新的页面

这个在上一篇文章也已经说过了,如果你看过上一篇文章,这里随便看看就好了。

我们新建一个 ChatScreen 页面

export default class ChatScreen extends Component {

  static navigationOptions = {
    title: 'Chat with Lucy',}

  render() {
    return (
        <View>
          <Text>Chat with Lucy</Text>
        </View>
    );
  }
}

然后在 HomeScreen添加一个按钮使其被点击的时候能跳转ChatScreen。这里我们就要用到 navigate 方法并且给它填入正确的 routeName 参数,我们这里定义的是 Chat

export default class HomeScreen extends Component {

  static navigationOptions = {
    title: 'Welcome'
  };

  render() {
    const {navigate} = this.props.navigation;
    return <View>
      <Text>Hello,Chat App!</Text>
      <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
      />
    </View>
  }
}

当然了,最最重要的不要忘记了在 StackNavigator 中进行注册

const RootNavigator = StackNavigator({ Home: {screen: HomeScreen},Chat: {screen: ChatScreen} });

现在,我们点击按钮就可以进行页面之间的切换了。

传递参数

任何页面之间的切换都避免不了参数的传递。还记得 navigate(routeName,params,action) 方法的第二个参数吗?params 就是要传递的参数。

render() {
    const {navigate} = this.props.navigation;
    return <View>
      <Text>Hello,Chat App!</Text>
      <Button
          onPress={() => navigate('Chat',{user: 'Lucy'})}
          title="Chat with Lucy"
      />
    </View>
  }

这里我们给 ChatScreen 传递了一个值为 ‘Lucy’ 的字符串 user,然后就可以通过 this.props.navigation.state.params 来取到你想要的参数。

export default class ChatScreen extends Component {

  // Nav options can be defined as a function of the screen's props:
  // Nav options 可以被定义成一个页面属性函数(原谅我英语太差)
  // 格式就像下面这样,你就可以取到 navigation 了
  static navigationOptions = ({navigation}) => ({
    title: `Chat with ${navigation.state.params.user}`,});

  render() {
    // The screen's current route is passed in to `props.navigation.state`:
    // 屏幕当前的路由被传递给了 `props.navigation.state`
    const {params} = this.props.navigation.state;
    return (
        <View>
          <Text>Chat with {params.user}</Text>
        </View>
    );
  }
}

你可以改一下 user 的值,然后看看有什么变化。

本文到此结束,下一篇打算详细写写 StackNavigator 的各个属性

原文链接:https://www.f2er.com/react/302272.html

猜你在找的React相关文章