react-native 简单的导航

默默潜水了两年了，一直都在看大神们写的博客，现在我也分享一下跟RN导航有关的东西。

前两年我主要是做iOS开发的，现在刚找了份工作，应公司要求，现在开始学习reactnative的东西，由于我以前没怎么接触过JavaScript，所以我写的垃圾代码，请大神们不要见笑。

好了，废话不多说，在app里面navigation用的频率肯定不低，所以现在我分享一下这个坑。

首先，RN环境搭建教程太多，我就不说了，如果不会的同学可以直接看这里。

然后我们来新建我们的项目

打开终端，进入你想创建项目所在的目录，这里我直接在桌面上创建了

cd desktop

创建项目

react-native init NavDemo

静静的呆一会，咱们的NavDemo就创建好了。

打开文件之后，我们看到的就是这样。

然后进入ios文件夹下，运行NavDemo.xcodeproj ，这样，我们新建的项目就跑起来了。模拟器上显示的就是这个效果

然后，我们打开index.ios.js文件。文件内容我有篇随笔写我们来更改一下Welcome to React Native!的颜色，直接在

welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},

里面加上color:'red',

welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,

color:'red',
},

看效果

好了，这个先玩到这，我们把为了方便,把index.ios.js文件里render包裹的代码删掉；引入Navigator，为了整洁，我们把Style也删了，然后代码就变成了这样

import React, { Component } from 'react';
import {
AppRegistry,
Navigator,
Platform
} from 'react-native';
class NavDemo extends Component {
 8 　　render() {
 9 　　　　return (

　　　　);
12 　　}
}
AppRegistry.registerComponent('NavDemo', () => NavDemo);

现在重点来了，我们在NavDemo文件夹中新建一个app文件夹，在app文件夹中新建一个frist.js文件,文件里的内容如下

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Navgator,
  TouchableOpacity
} from 'react-native';
export default class FirstPage extends Component {
  render() {
    return (
      <View style={styles.container}>
         <Text style={styles.welcome}>
            这是第一页，点击跳到第二页
         </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color:'red',
  },
});

然后我们在index.ios.js中引入first

import React, { Component } from 'react';
import {
  AppRegistry,
  Navigator,
  Platform,
} from 'react-native';

import FirstPage from './app/first.js';

const defaultRoute = {
  component: FirstPage,
};

class NavDemo extends Component {
  _renderScene(route, navigator) {
    let Component = route.component;
    return (
      <Component {...route.params} navigator={navigator} />
    );
  }
  render() {
    return (
      <Navigator
        initialRoute={defaultRoute}
        renderScene={this._renderScene}
        />
    );
  }
}
AppRegistry.registerComponent('NavDemo', () => NavDemo);

现在你可以运行一下看一下效果

很显然，first.js才是我们的第一页，index.ios.js只是起到了一个实例化导航的作用。

那么我们在新建第二页second.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Navgator,
  TouchableOpacity
} from 'react-native';

export default class SecondPage extends Component {
  render() {
    return (
      <View style={styles.container}>
         <Text style={styles.welcome}>
            这是第二页，点击回到第一页
         </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color:'red',
  },
});

好了，第二页也建好了，那么我们来实现如何跳到第二页，首先我们在first.js中给text添加点击事件和方法

<TouchableOpacity onPress={this._openPage.bind(this)}>
<Text style={styles.welcome}>
这是第一页，点击跳到第二页
</Text>
</TouchableOpacity>

然后引入第二页，

import SecondPage from './second';

实现点击方法

_openPage() {
this.props.navigator.push({
component: SecondPage,
})
},

试试看能不能跳到第二页。完全可以。

那么如何back呢？

我们在second.js中也要给text添加方法

<TouchableOpacity onPress={this._openPage.bind(this)}>
<Text style={styles.welcome}>
回到第一页
</Text>
</TouchableOpacity>，

实现方法

_openPage() {
this.props.navigator.pop()
}

运行一下看看，OK，简单的导航就这样介绍完毕，完整的代码我贴在下面

first.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Navgator,
  TouchableOpacity
} from 'react-native';

import SecondPage from './second';

export default class FirstPage extends Component {

  _openPage() {
      this.props.navigator.push({
      component: SecondPage,
      })
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._openPage.bind(this)}>
         <Text style={styles.welcome}>
            这是第一页，点击跳到第二页       
         </Text>
       </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color:'red',
  },
});

second.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Navgator,
  TouchableOpacity
} from 'react-native';

export default class SecondPage extends Component {

  _openPage() {
      this.props.navigator.pop()
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._openPage.bind(this)}>
         <Text style={styles.welcome}>
            回到第一页
         </Text>
       </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color:'red',
  },
});

本文原创，转载前请声明原文地址