一個react-native項目祟辟，創(chuàng)建之后會index.ios和index.android兩個入口医瘫。我們通過
require('./src/app');
在src/app對界面進行渲染，在在安卓或者ios平臺旧困，都會統(tǒng)一跳轉(zhuǎn)到app.js文件
以前是在做android開發(fā)醇份，界面的跳轉(zhuǎn)在本頁面，通過點擊事件嗯監(jiān)聽吼具，通過Intent皆可以直接跳轉(zhuǎn)界面僚纷。但是在RN中，界面的跳轉(zhuǎn)需要我們通過Navigator進行跳轉(zhuǎn)拗盒。如果你們運行我下面的代碼怖竭，你可能會有疑問，為什么兩個文件只有一個界面锣咒。
因為我們app.js這個文件是應用的入口侵状，在這個入口里赞弥，我們做了一件事，Navigator這個界面跳轉(zhuǎn)的工具注入到項目中,更改下面的代碼趣兄，可以跳轉(zhuǎn)到main.js绽左。也就是你整個app要進入的主界面。
import main from './View/main'
initialRoute={{id: 'main', component: main}}
這樣我們在以后的界面中艇潭，就可以通過this.props.navigator進行界面的跳轉(zhuǎn)回退等一系列界面跳轉(zhuǎn)了拼窥。
src/app.js 文件
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
Navigator
} from 'react-native';
import main from './View/main'
export default class tipsi extends Component {
render() {
return (
<Navigator
initialRoute={{id: 'main', component: main}}
configureScene={this.configureScene}
renderScene={this.renderScene}
/>
);
}
configureScene(route, routeStack) {
if (route.sceneConfig) { // 有設(shè)置場景
return route.sceneConfig;
}
return Navigator.SceneConfigs.PushFromRight; // 默認，右側(cè)彈出
}
renderScene(route, navigator) {
return <route.component {...route.passProps} navigator= {navigator}/>;
}
}
AppRegistry.registerComponent('tipsi', () => tipsi);
src/view/main.js
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
Navigator
} from 'react-native';
import Counter from './Counter'
export default class tipsi extends Component {
plus() {
this.props.navigator.push({
component: Counter
})
}
render() {
return (
<View style={styles.container}>
<Button title="加減數(shù)量控件" onPress={() => {
this.plus()
}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
AppRegistry.registerComponent('tipsi', () => tipsi);
基礎(chǔ)中的基礎(chǔ)蹋凝，剛學習的時候比較懵鲁纠，希望能幫助更多小白少走彎路。
