我们需要先写几个tab的内容页和其他页面,来为下一节集成路由和tab做个铺垫。
先来看一下项目结构
如图添加一个home.js文件作为tab的内容页,代码如下
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
} from 'react-native';
export default class HomeTabScreen extends Component {
constructor(props){
super(props);
}
render() {
return (
<View style={[global.styles.screen]}>
<Text style={[global.styles.text]}>
this is HomeTabScreen.
</Text>
</View>
)
}
}
这里的global.styles.screen和global.styles.text是全局样式变量,可以在App.js里面这样定义
global.styles = StyleSheet.create({
screen: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#e6e6e6',
},
container: {
backgroundColor: '#e6e6e6',
},
text: {
color: '#2c2c2c',
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
同home.js,我们再添加3个tab内容页headset.js、bought.js、mine.js。
然后添加2个其他的内容页,这里我添加了signInOrUp.js和signIn.js
import React, { Component } from 'react';
import {
// Platform,
StyleSheet,
View,
Text,
} from 'react-native';
export default class SignInOrUpScreen extends Component {
constructor(props){
super(props);
}
render() {
return (
<View style={[global.styles.screen]}>
<Text style={[global.styles.text]}>
this is SignInOrUpScreen.
</Text>
</View>
)
}
}
import React, { Component } from 'react';
import {
// Platform,
StyleSheet,
View,
Text,
} from 'react-native';
export default class SignInScreen extends Component {
constructor(props){
super(props);
}
render() {
return (
<View style={[global.styles.screen]}>
<Text style={[global.styles.text]}>
this is SignInScreen.
</Text>
</View>
)
}
}