react-native--Navigator
'use strict';
import React, {
AppRegistry,
Component,
Navigator,
} from 'react-native';
import SplashScreen from './splash.js'
class AwesomeProject extends Component {
render() {
let defaultName = 'Splash';
let defaultComponent = SplashScreen;
return (
<Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
} }
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
} }
/>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);//代码分析：
initialRoute–定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。initialRoute必须是initialRouteStack中的一个路由。initialRoute默认为initialRouteStack中最后一项！
initialRoute={{ name: defaultName, component: defaultComponent }} 这个指定了默认的页面，也就是启动app之后会看到界面的第一屏。 需要填写两个参数: name 跟 component。
configureScene
可选的函数，用来配置场景动画和手势。会带有两个参数调用，一个是当前的路由，一个是当前的路由栈。然后它应当返回一个场景配置对象！
(route, routeStack) => Navigator.SceneConfigs.FloatFromRight
configureScene={(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
} }
renderScene function
必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。
(route, navigator) =>
<MySceneComponent title={route.title} navigator={navigator} />
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}
…route.params—-数据传递来源
route传递的是component和name，navigator传递的Navigator对象，navigator作为props传递给component！
如果你得到了一个navigator对象的引用，则可以调用许多方法来进行导航：
● getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。
● jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。
● jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了。
● jumpTo(route) - 跳转到已有的场景并且不卸载。
● push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去
● pop() - 跳转回去并且卸载掉当前场景
● replace(route) - 用一个新的路由替换掉当前场景
● replaceAtIndex(route, index) - 替换掉指定序列的路由场景
● replacePrevious(route) - 替换掉之前的场景
● immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
● popToRoute(route) - pop到路由指定的场景，其他的场景将会卸载。
● popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。
//页面进行跳转
'use strict'
import React, {
Component,
TouchableOpacity,
View,
Text,
} from 'react-native'
import OnepageCompent from './index.one.js'
export default class SecondPageComponent extends Component {
constructor(props) {
super(props);
this.state = {};
}
_pressButton() {
const { navigator } = this.props;
if(navigator) {
//进入
navigator.push({
name: 'OnepageCompent',
component: OnepageCompent,
})
}
}
render() {
return(
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我</Text>
</TouchableOpacity>
</View>
);
}
}
'use strict'
import React, {
Component,
TouchableOpacity,
View,
Text,
} from 'react-native'
export default class OnepageCompent extends Component {
constructor(props) {
super(props);
this.state = {};
}
_pressButton() {
const { navigator } = this.props;
if(navigator) {
//跳转回去并且卸载掉当前场景<显示前一个页面>
navigator.pop();
}
}
render() {
return(
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我跳回去</Text>
</TouchableOpacity>
</View>
);
}
}
这个语法是把 route.params 里的每个key 作为props的一个属性:
<其他参数也是作为KEY>
navigator.push({ name: 'OnepageCompent', component: OnepageCompent, })这里的route，最基本的route就是: var route = { component: LoginComponent }参数传递：
constructor(props) { super(props); this.state = { id:2 };
}
_pressButton() { const { navigator } = this.props;
if(navigator) { navigator.push({ name: 'OnepageCompent', component: OnepageCompent, params:{ id:this.state.id }
})
}
}参数获取：
constructor(props) { super(props); this.state = { id:null };
}
componentDidMount(){ this.setState({ id: this.props.id });
}特殊需求：当然页面跳转到下一个页面，下一个页面处理玩数据，返回到前一个页面<当前页面>处理数据
<概念：上一个页面的实例或者回调方法，作为参数传递到当前页面来，在当前页面操作上一个页面的state>
'use strict'
import React, {
Component,
TouchableOpacity,
View,
Text,
ToastAndroid,
} from 'react-native'
import OnepageCompent from './index.one.js'
export default class SecondPageComponent extends Component {
constructor(props) {
super(props);
this.state = {
id:1,
user:null,
};
}
_pressButton() {
let _this = this;
const { navigator } = this.props;
if(navigator) {
navigator.push({
name: 'OnepageCompent',
component: OnepageCompent,
params: {
id: this.state.id,
getUser: function(user) {
_this.setState({
user: user
})
}
}
});
}
}
render() {
if( this.state.user ) {
return(
<View>
<Text>用户信息: { JSON.stringify(this.state.user) }</Text>
</View>
);
}else {
return(
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>查询ID为{ this.state.id }的用户信息</Text>
</TouchableOpacity>
</View>
);
}
}
}
'use strict'
import React, {
Component,
TouchableOpacity,
View,
Text,
ToastAndroid,
} from 'react-native'
const USER_MODELS = {
1: { name: 'mot', age: 23 },
2: { name: '晴明大大', age: 25 }
};
export default class OnepageCompent extends Component {
constructor(props) {
super(props);
this.state = {
id: null
};
}
componentDidMount() {
this.setState({
id: this.props.id
});
}
_pressButton() {
const { navigator } = this.props;
if(this.props.getUser) {
let user = USER_MODELS[this.props.id];
this.props.getUser(user);
}
if(navigator) {
navigator.pop();
}
}
render() {
return (
<View>
<TouchableOpacity onPress={this._pressButton.bind(this) }>
<Text>点我跳回去</Text>
</TouchableOpacity>
</View>
);
}
}