React Native (一)：基礎(chǔ)
React Native (二)：StatusBar 、 NavigationBar 與 TabBar
React Native (三)：自定義視圖
React Native (四)：加載新聞列表
React Native (五)：上下拉刷新加載
React Native (六)：加載所有分類與詳情頁

項(xiàng)目地址

React Native App 的視圖結(jié)構(gòu)

首先把 setup.js 的 Root 以及 布局 的代碼改一下：

class Root extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                    
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },

});

React Native 的所有界面都是在一個(gè)主視圖上，這里的這個(gè) <View> 跟 iOS 中的 Window 是同樣的，這里跟 Android 不太一樣。

當(dāng)然運(yùn)行在 iOS 和 Android 中還是以 ViewController 和 Activity 展示的。

StatusBar

iOS 和 Android 的 StatusBar 是差不多的，都是頂部那高度 20 的部分，用來顯示信號(hào)、電量等系統(tǒng)的信息。

在 setup.js 中加入 StatusBar：

import {
    StyleSheet,
    Text,
    View,
    StatusBar
} from 'react-native';

class Root extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <StatusBar 
                    barStyle={'light-content'}
                    backgroundColor={'#000000'}
                />
            </View>
        );
    }
}

StatusBar 的配置可以看這里，注意有些屬性只針對(duì)特定平臺(tái)。

這樣可以設(shè)置整個(gè) App 中 StatusBar 的樣式，如果有某個(gè)頁面 A 的 StatusBar 需要特殊處理，那么就在 A 頁面加入 StatusBar 進(jìn)行設(shè)置。

Navigator

我們需要用 Navigator 來讓整個(gè) App 可以在頁面之間跳轉(zhuǎn)。

Navigator 和 iOS 的一樣，都是對(duì)頁面進(jìn)行 push 和 pop ，跟 Android 的 NavigationView 不是一個(gè)東西。

官方文檔在這里

現(xiàn)在在 App 文件夾內(nèi)創(chuàng)建一個(gè)新的文件 App.js ：

'use strict';


import React from 'react'

import {
    StyleSheet,
    View,
    Text

} from 'react-native';

export default class App extends React.Component {

    render() {
        return (
            <View style={styles.view}>
        <Text>main</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    view: {
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center'

    },
});

然后在 setup 內(nèi) StatusBar 下面加入 Navigator :

import App from './App'


<Navigator
    initialRoute={{ component: App }}

    style={{flex:1}}
    renderScene={(route, navigator) => {
        BackAndroid.addEventListener('hardwareBackPress', function() {
            if(navigator == null){
                return false;
            }
            if(navigator.getCurrentRoutes().length === 1){
                return false;
            }
            navigator.pop();
            return true;
        });

        let Component = route.component;
        return <Component {...route.params} navigator={navigator}/>
        //  上面的route.params 是為了方便后續(xù)界面間傳遞參數(shù)用的
    }}
/>

其中 initialRoute 設(shè)置了 component ，是最底層的第一個(gè)頁面。

然后 renderScene 控制 push 的時(shí)候做哪些操作，這里的 BackAndroid.addEventListener 是監(jiān)聽了 Android 的物理返回按鍵。

現(xiàn)在運(yùn)行可以看見頁面中間有個(gè) main ：

你可能會(huì)發(fā)現(xiàn)為什么沒 NavigationBar 呢，我們后面再加。

tab-navigator

官方并沒有 TabBar ，我們使用一個(gè)第三方 react-native-tab-navigator

在項(xiàng)目根目錄執(zhí)行命令

npm install react-native-tab-navigator --save

安裝完成后在 App.js 加入 TabNavigator:

const home_key = 'home'
const satin_key = 'satin'
const setting_key = 'setting'


import Home from './Home/Home'
import Satin from './Satin/Satin'
import Setting from './Setting/Setting'


<TabNavigator>
    <TabNavigator.Item
        selected={this.state.selectedTab === home_key}
        title="首頁"
        titleStyle={styles.tabText}
        selectedTitleStyle={styles.selectedTabText}
        renderIcon={() => <Image style={styles.icon} source={require("./Images/root/home_unselect.png")} />}
        renderSelectedIcon={() => <Image style={styles.icon} source={require("./Images/root/home_select.png")} />}
        onPress={() => this.setState({ selectedTab: home_key })}>
    
        <Home navigator={this.props.navigator}/>
    </TabNavigator.Item>
    <TabNavigator.Item
        selected={this.state.selectedTab === satin_key}
        title="段子"
        titleStyle={styles.tabText}
        selectedTitleStyle={styles.selectedTabText}
        renderIcon={() => <Image style={styles.icon} source={require("./Images/root/activity_unselect.png")} />}
        renderSelectedIcon={() => <Image style={styles.icon} source={require("./Images/root/activity_select.png")} />}
        onPress={() => this.setState({ selectedTab: satin_key })}>
    
        <Satin navigator={this.props.navigator}/>
    </TabNavigator.Item>
    <TabNavigator.Item
        selected={this.state.selectedTab === setting_key}
        title="我的"
        titleStyle={styles.tabText}
        selectedTitleStyle={styles.selectedTabText}
        renderIcon={() => <Image style={styles.icon} source={require("./Images/root/my_unselect.png")} />}
        renderSelectedIcon={() => <Image style={styles.icon} source={require("./Images/root/my_select.png")} />}
        onPress={() => this.setState({ selectedTab: setting_key })}>
    
        <Setting navigator={this.props.navigator}/>
    </TabNavigator.Item>
</TabNavigator>

配置也比較易懂。

另外創(chuàng)建 3 個(gè)文件 Home.js 、 Satin.js 和 Setting.js

import React from 'react'

import {
    View,
    StyleSheet
} from 'react-native'


export default class Satin extends React.Component {
    render() {
        return (
            <View style={styles.view}>

            </View>
        )
    }
}

const styles = StyleSheet.create({
    view: {
        flex:1,
        backgroundColor: 'orange'
    }
})

可以給每個(gè)設(shè)置不同的顏色，這樣點(diǎn)擊界面切換也很明顯。

具體的代碼可以看 項(xiàng)目

NavigationBar

同意官方也沒有提供 NavigationBar，我們需要自定義一個(gè)。

然后在 Home.js 、 Satin.js 和 Setting.js 加入

import React from 'react'

import {
    View,
    StyleSheet
} from 'react-native'

import NavigationBar from '../Custom/NavBarCommon'


export default class Home extends React.Component {
    render() {
        return (
            <View style={styles.view}>
                <NavigationBar
                    title="首頁"
                    unLeftImage={true}
                />

            </View>
        )
    }
}

const styles = StyleSheet.create({
    view: {
        flex:1,
        backgroundColor: 'white'
    }
})

navibar

項(xiàng)目地址