默默潜水了两年了，一直都在看大神们写的博客，现在我也分享一下跟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 {
render() {
return (
);
}
}
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',
},
});
本文原创，转载前请声明原文地址
