摘要：一個(gè)簡單的，用于介紹相關(guān)基礎(chǔ)信息，主要是針對(duì)有興趣的同學(xué)參考以下內(nèi)容及代碼在測(cè)試有效。本文不介紹安裝模擬器的開發(fā)方式，需要的請(qǐng)自行。路由組件使用組件使用入口首頁使用側(cè)滑路由組件，默認(rèn)顯示路由為對(duì)象的第一個(gè)屬性值。

[toc]

一個(gè)簡單的demo，用于介紹react-native相關(guān)基礎(chǔ)信息，主要是針對(duì)有興趣的同學(xué)參考；以下內(nèi)容及代碼在2018-08測(cè)試有效。
完整項(xiàng)目代碼：https://github.com/NameHewei/react-native

npm install -g create-react-native-app

create-react-native-app you-app-name

cd you-app-name

npm start

download Expo app：https://expo.io/（可能要注冊(cè)）在手機(jī)上安裝

掃描 npm start 后顯示的二維碼

為了項(xiàng)目順利，請(qǐng)備好梯子！

這里是通過在手機(jī)上安裝Expo，然后用Expo掃描啟動(dòng)項(xiàng)目后生成的二維碼來預(yù)覽你的react-native項(xiàng)目，前提是PC的IP要與手機(jī)的IP在同一個(gè)網(wǎng)段內(nèi)。Expo打包你的項(xiàng)目后，每次PC端Ctrl+S都會(huì)自動(dòng)更新Expo的內(nèi)容。本文不介紹安裝模擬器的開發(fā)方式，需要的請(qǐng)自行Google。

|—— app.js
|—— view
  |—— Home.js
    |—— cookbook
        |—— Cookbook.js
        |—— Detail.js
        |—— List.js
    |—— novel
        |—— Novel.js

以下所有涉及組件屬性請(qǐng)參考文章最后官網(wǎng)鏈接進(jìn)行查看，本文只對(duì)關(guān)鍵屬性作說明。

路由組件使用：react-native

UI組件使用：native-base

export default createDrawerNavigator({
    home: {
        screen: Home
    },
    novel: {
        screen: Novel
    },
    cookbook: {
        screen: Cookbook
    },
}, {
    drawerBackgroundColor: "#ffffff",
    contentOptions: {
        activeTintColor: "#e91e63",
    }
});

首頁使用側(cè)滑（createDrawerNavigator）路由組件，默認(rèn)顯示路由為對(duì)象的第一個(gè)屬性值。

export default class Home extends Component {
    static navigationOptions = {
        drawerLabel: "Home",
        drawerIcon: ({ tintColor }) => (
            
        ),
    };

    render() {
        return (    
            
                
                     this.props.navigation.openDrawer() }>
                        
                     
                
            
        );
    }
}

該頁面主要是首屏顯示內(nèi)容，根據(jù)頁面代碼注意以下三點(diǎn):

圖片鏈接要用TouchableHighlight

使用navigation.openDrawer()方法打開側(cè)滑

圖片地址要用require(url)方法引入

const navigationConfig = {
    header: null
}

export default App = createStackNavigator({
    List: {
        screen: List,
        path: "list/:id",
        navigationOptions: (navigation) => (navigationConfig)
    },
    Detail: { 
        screen: Detail,
        navigationOptions: (navigation) => ({
            title: "詳情"
        })
    },
})

cook模塊功能是提供一個(gè)列表頁，點(diǎn)擊列表項(xiàng)進(jìn)入詳情頁，注意以下三點(diǎn)：

用createStackNavigator路由組件實(shí)現(xiàn)。

List 頁面不需要頂部的header所以設(shè)置為null(具體參見文檔)

因?yàn)樵斍轫撔枰猧d這里可以用list/:id傳參

export default class ListComponent extends Component {
    render() {
        return (    
            
                
                    
                        
                             {
                                this.props.navigation.navigate("Detail", {
                                    id: 0
                                })
                            }}>
                                
                                    
                                
                                
                                    回鍋肉
                                    一道好吃到板的菜
                                
                                
                                    2018-08-21
                                
                            
                    
                    
                

            

        );
    }
}

該組件用到了native-base UI組件

注意以下四點(diǎn)：

注意組件只能用提供的，style的屬性也是只能用提供的。

頂部菜單欄高為20 ，所有寬高都不需要加單位，會(huì)自動(dòng)轉(zhuǎn)化為設(shè)備單位

文字必須要用Text包裹

路由跳轉(zhuǎn)由navigation.navigate("name", params)實(shí)現(xiàn)

export default createBottomTabNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: () => ({
            tabBarVisible : true,
            title: "螞蟻國度",
            headerBackTitle: null
        }), 
    },
    Settings: {
        screen: SettingsScreen,
        navigationOptions: () => ({
            tabBarVisible : true,
            title: "最強(qiáng)神級(jí)兵王",
            headerBackTitle: null
            }),
    },
    }, {
        headerMode: "screen",
    });

該模塊采用在底部點(diǎn)擊菜單按鈕的形式來查看不同小說，所以采用新的路由方式：

使用createBottomTabNavigator切換screen

頁面內(nèi)容多需要滑動(dòng)，需用ScrollView組件包裹

RN官網(wǎng)：https://facebook.github.io/re...

React Navigation官網(wǎng): https://reactnavigation.org/

nativeBase組件:https://nativebase.io/

若有疑問或錯(cuò)誤，請(qǐng)指正，謝謝！Github blog issues