我們需要先寫幾個tab的內(nèi)容頁和其他頁面,來為下一節(jié)集成路由和tab做個鋪墊。
先來看一下項目結(jié)構(gòu)
如圖添加一個home.js文件作為tab的內(nèi)容頁,代碼如下
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,我們再添加3個tab內(nèi)容頁headset.js、bought.js、mine.js。
然后添加2個其他的內(nèi)容頁,這里我添加了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.) ????} }