初始化一個(gè)項(xiàng)目

react-native init 項(xiàng)目名稱

react-native的項(xiàng)目的目錄結(jié)構(gòu)：

src/
    pages/
        Home/
        Near/
        Order/
        Mine/
    components/
        自定義組件
    common/
        sreen
        color
    navigator/
        MainNavigator/
    store/
    network/

react-native 項(xiàng)目添加新的依賴庫(kù)：

在終端界面進(jìn)入項(xiàng)目文件夾中，

npm install --save 依賴庫(kù)

例子：

npm install --save react-navigation

運(yùn)行之后會(huì)發(fā)現(xiàn)項(xiàng)目的 package.json的

"dependencies": {
    "react": "16.0.0",
    "react-native": "0.50.3",
    "react-navigation": "^1.0.0-beta.19"
  },

的依賴文件中多個(gè) "react-navigation": "^1.0.0-beta.19"

JSX 語(yǔ)法沒有前向聲明，組件的定義要在使用之前。

RN app 的組件的結(jié)構(gòu)。

棧導(dǎo)航作為根組件來(lái)管理組件的Push Pop

const MainNavigator = StackNavigator(
    // 配置路由
    {
        // TabNavigator
        Tab: { 
            screen: TabNavigator(
                // 配置路由
                {   
                    // 普通 Component
                    Home: { screen: HomePage },
                    Near: { screen: NearPage },
                    Order: { screen: OrderPage },
                    Mine: { screen: MinePage },
                },
                // 配置選項(xiàng)卡的通用樣式
                {
                    tabBarComponent: TabBarBottom,
                    tabBarPosition: 'bottom',
                    swipeEnabled: true,
                    animationEnabled: true,
                    lazy: true,
                    tabBarOptions: {
                            activeTintColor: color.theme,
                            inactiveTintColor: color.tabbartitle,
                            style: { backgroundColor: '#fff' }
                    }
                }
            )
        },
        // 普通的Component
        Detail: {
            screen: DetailPage
        },
        Web: {
            screen: WebPage
        }
    },
    // 配置導(dǎo)航欄的通用樣式
    {
        navigationOptions:{
            headerStyle:{backgroundColor: color.theme},
            headerBackTitle:null,
            headerTintColor:'#333',
            showIcon:true,
        },
    }
)

// app.js
render(){
    return(
        <MainNavigator/>
    );
}

注意生成的 MainNavigator 渲染必須作為根組件返回。

render(){
    return(
        <View>
            <MainNavigator/>
        </View>
    );
}

這樣渲染會(huì)有幺蛾子哦。

關(guān)于導(dǎo)航組件 StackNavigator TabNavigator api 的使用可以去官網(wǎng)查看。
react-navigator官網(wǎng)