一个react-native项目,创建之后会index.ios和index.android两个入口。我们通过
require('./src/app');
在src/app对界面进行渲染,在在安卓或者ios平台,都会统一跳转到app.js文件
以前是在做android开发,界面的跳转在本页面,通过点击事件嗯监听,通过Intent皆可以直接跳转界面。但是在RN中,界面的跳转需要我们通过Navigator进行跳转。如果你们运行我下面的代码,你可能会有疑问,为什么两个文件只有一个界面。
因为我们app.js这个文件是应用的入口,在这个入口里,我们做了一件事,Navigator这个界面跳转的工具注入到项目中,更改下面的代码,可以跳转到main.js。也就是你整个app要进入的主界面。
import main from './View/main'
initialRoute={{id: 'main', component: main}}
这样我们在以后的界面中,就可以通过this.props.navigator进行界面的跳转回退等一系列界面跳转了。
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) { // 有设置场景
return route.sceneConfig;
}
return Navigator.SceneConfigs.PushFromRight; // 默认,右侧弹出
}
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="加减数量控件" onPress={() => {
this.plus()
}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
AppRegistry.registerComponent('tipsi', () => tipsi);
基础中的基础,刚学习的时候比较懵,希望能帮助更多小白少走弯路。