此文章只适合新手，老司机如有宝贵意见请多提。
App
/**
* Created by function on 2017/3/9.
*/
import React, {Component} from 'react';
//导入对应的页面文件
import Home from './Home'
import {
StyleSheet,
View,
Text,
Navigator
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
let defaultName = 'Home';
let defaultComponent = Home;
return (
/**
* initialRoute：指定了默认的页面，也就是启动app之后会看到界面的第一屏。 需要填写两个参数: name 跟 component。
* configureScene：页面之间跳转时候的动画和手势，具体请看官方文档
* renderScene：导航栏可以根据指定的路由来渲染场景，调用的参数是路由和导航器
*/
<Navigator
initialRoute={{name: defaultName, component: defaultComponent}}
configureScene={(route) => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator}/>
}}/>
);
}
}
注释意见写得很清楚了，就不啰嗦了。
Home
/**
* Created by function on 2017/3/11.
*/
import React, {Component} from 'react';
import SecondPage from './SecondPage';
import TextButton from '../components/TextButton';
import {
View,
} from 'react-native';
export default class Home extends Component {
constructor(props) {
super(props);
}
_onPress = () => {
/**
* 为什么这里可以取得 props.navigator?请看上面的App.js:
* <Component {...route.params} navigator={navigator} />
* 这里传递了navigator作为props
*/
const { navigator } = this.props;
if(navigator) {
navigator.push({
name: 'SecondPage',
component: SecondPage,
})
}
};
render() {
const {counter} = this.props;
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>我是第一个界面</Text>
<TextButton onPress={this._onPress} text={'点击跳转'}/>
</View>
);
}
}
简单说一下，这里的页面就是简单的一个TextButton，点击事件里面onPress 先获取父页面传过来的navigator，判断到如果存在，那边就push跳转一个对面的页面，我这里写的是SecondPage。
哦，对，还有一个小细节，细心的同志估计看到我的onPress不用这样写
_onPress={ this._onPress.bind (this) }
或者这样写
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {};
this._onPress = this._onPress.bind(this);
}```
把方法直接作为一个arrow function的属性来定义，初始化的时候就绑定好了this指针
写了以后是这样的
_onPress = () => {
const {navigator} = this.props;
if (navigator) {
navigator.push({
name: 'SecondPage',
component: SecondPage,
})
}
};
没写是这样
_onPress(){
const {navigator} = this.props;
if (navigator) {
navigator.push({
name: 'SecondPage',
component: SecondPage,
})
}
};
大家对比一下就知道细节在哪里
简单封装一个TextButton
/**
- Created by function on 2017/3/9.
*/
import React, {Component} from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
/**
简单封装一个Button
text：显示的内容
-
onPress：回调
*/
export default class TextButton extends Component {constructor(props) {
super(props);
}render() {
const {text, onPress} = this.props;return ( <View> <TouchableOpacity onPress={onPress} style={styles.button}> <Text>{text}</Text> </TouchableOpacity> </View> );}
}
const styles = StyleSheet.create({
button: {
width: 100,
height: 30,
padding: 10,
backgroundColor: 'lightgray',
alignItems: 'center',
justifyContent: 'center',
margin: 3
}
});
理解不了的请看注释
##SecondPage
/**
-
Created by function on 2017/3/11.
*/
import React, {Component} from 'react';
import TextButton from '../components/TextButton';
import {
View,
Text,
} from 'react-native';
export default class SecondPage extends Component {_onPress = () => {
const { navigator } = this.props;
if(navigator) {
/**
* 感觉就像入栈出栈
*/
navigator.pop();
}
};render() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={{color: 'red'}}>我是第二个界面</Text>
<TextButton onPress={this._onPress} text={'点击跳回去'}/>
</View>
);
}
}
就简单的显示几个文字和跳转回去的按钮
##来看看效果
手势和跳转动画在上面说了。
如有不完善地方，欢迎讨论
##带参跳转
按照上面的例子，加以改造。
直接上代码吧，注释意见写得听清楚的了
/**
-
Created by function on 2017/3/11.
*/
import React, {Component} from 'react';
import SecondPage from './SecondPage';
import TextButton from '../components/TextButton';
import {
View,
Text,
} from 'react-native';
export default class Home extends Component {// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
id: 2,
user: '',
};
}_onPress = () => {
/**
* 为什么这里可以取得 props.navigator?请看上面的App.js:
* <Component {...route.params} navigator={navigator} />
* 这里传递了navigator作为props
*/
const {navigator} = this.props;if (navigator) { navigator.push({ name: 'SecondPage', component: SecondPage, params: { id: this.state.id, /** * 把getUser这个方法传递给下一个页面获取user * @param user */ getUser: (user) => { this.setState({ user: user }) } } }) }};
render() {
const {user} = this.state;
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
{user === '' && <Text>我是第一个界面</Text>}
{user !== '' && <Text>用户信息: { JSON.stringify(user) }</Text>}
<TextButton onPress={this._onPress} text={'点击跳转'}/>
</View>
);
}
}
/**
- Created by function on 2017/3/11.
*/
import React, {Component} from 'react';
import TextButton from '../components/TextButton';
import {
View,
Text,
} from 'react-native';
const USER = {
1: {name: 'Action', age: 23},
2: {name: 'Function', age: 25}
};
export default class SecondPage extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
id: '',
};
}
componentDidMount() {
/**
* 这里获取从上个页面跳转传递过来的参数: id，赋值给this.state.id
*/
this.setState({
id: this.props.id
})
}
_onPress = () => {
const {navigator} = this.props;
if (this.props.getUser) {
let user = USER[this.props.id];
this.props.getUser(user);
}
if (navigator) {
/**
* 感觉就像入栈出栈
*/
navigator.pop();
}
};
render() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={{fontSize: 15}}>获得的参数: id={ this.state.id }</Text>
<Text style={{color: 'red'}}>我是第二个界面</Text>
<TextButton onPress={this._onPress} text={'点击跳回去'}/>
</View>
);
}
}
##效果图
github会随着更新而更新[https://github.com/LinsanityZ/EnjoyGossip](https://github.com/LinsanityZ/EnjoyGossip)
如有不完善地方，欢迎讨论