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',

  },

});

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

巴特西

react-native 简单的导航

最新文章

热门文章