我們需要先寫幾個(gè)tab的內(nèi)容頁(yè)和其他頁(yè)面，來為下一節(jié)集成路由和tab做個(gè)鋪墊。

先來看一下項(xiàng)目結(jié)構(gòu)

如圖添加一個(gè)home.js文件作為tab的內(nèi)容頁(yè)，代碼如下

import?React,?{?Component?}?from?'react';
import?{
????StyleSheet,
????View,
????Text,
}?from?'react-native';

export?default?class?HomeTabScreen?extends?Component?{
????constructor(props){
????????super(props);
????}

????render()?{
????????return?(this?is?HomeTabScreen.)
????}
}

這里的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，我們?cè)偬砑?個(gè)tab內(nèi)容頁(yè)headset.js、bought.js、mine.js。

然后添加2個(gè)其他的內(nèi)容頁(yè)，這里我添加了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?(this?is?SignInOrUpScreen.)
????}
}

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?(this?is?SignInScreen.)
????}
}