React Native

最近在学React Native，了解了一个原本iOS中非常重要的导航控件的使用方法。不过在React Nativa中，这个导航控件是不会自带顶部的导航栏的，也不会自动生成返回按钮之类的，只是提供了类似的导航功能，且原理也是出栈入栈的方式，也就是说同样是有着push和pop方法的。这里不讲React Native的基础了，直接讲一讲Navigator这个组件的基本使用方法。

对于一个导航组件，最基本的就是下面几个点：

• 进入下一个界面
• 返回上一个界面
• 传递数据给下一个界面
• 返回数据给上一个界面

我们一个一个来看。

首先要使用Navigator组件，按照惯例是要import它的，这个别忘了。一般我们都是在index.ios.js文件中放置整个app的入口界面，这里我们也是要把Navigator这个组件框架放在index.ios.js文件中，代码如下：

export default class RNNavigatorDemo extends Component {
  render() {
    let rootViewName = 'FirstView';
    let rootComponent = FirstView;

    return (
      <Navigator
        initialRoute = {{ name: rootViewName, component: rootComponent }}
        configureScene = {(route) => {
          return Navigator.SceneConfigs.HorizontalSwipeJump ;
        }}
        renderScene = {(route, navigator) => {
          let Component = route.component;
          return <Component {...route.params} navigator = {navigator} />
        }} />
    );
  }
}
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

可以看到我们return了一个Navigator容器。initialRoute就是我们要放在这个导航容器中的根界面，也是第一个界面，这里我们放的是名为FirstView的界面，这个界面是由另一个js文件描述的，所以也要记得import。我们把它作为component参数的值，至于另一个name参数，真的也就是一个name而已，不太重要。然后紧跟着的configureScene是描述界面之间的过渡动画的，比如从右边滑出来啊或者从底部滑出来之类的，在node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js文件中可以看到所有可以选的方式。接下来的内容直接写就可以了。

到此，我们放置了一个Navigator的导航容器，第一个界面是我们的FirstView界面，至于界面长什么样子，就是在FirstView.js文件中描述了。