react-native 项目的结构

初始化一个项目

react-native init 项目名称

react-native的项目的目录结构：

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

react-native 项目添加新的依赖库：

在终端界面进入项目文件夹中，

npm install --save 依赖库

例子：

npm install --save react-navigation

运行之后会发现项目的 package.json的

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

的依赖文件中多个 "react-navigation": "^1.0.0-beta.19"

JSX 语法没有前向声明，组件的定义要在使用之前。

RN app 的组件的结构。

栈导航作为根组件来管理组件的Push Pop

const MainNavigator = StackNavigator(
    // 配置路由
    {
        // TabNavigator
        Tab: { 
            screen: TabNavigator(
                // 配置路由
                {   
                    // 普通 Component
                    Home: { screen: HomePage },
                    Near: { screen: NearPage },
                    Order: { screen: OrderPage },
                    Mine: { screen: MinePage },
                },
                // 配置选项卡的通用样式
                {
                    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
        }
    },
    // 配置导航栏的通用样式
    {
        navigationOptions:{
            headerStyle:{backgroundColor: color.theme},
            headerBackTitle:null,
            headerTintColor:'#333',
            showIcon:true,
        },
    }
)

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

注意生成的 MainNavigator 渲染必须作为根组件返回。

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

这样渲染会有幺蛾子哦。

关于导航组件 StackNavigator TabNavigator api 的使用可以去官网查看。
react-navigator官网