React NativeReact Native开发经验集React-Native 开发阵营

React Native (二):StatusBar 、 Nav

2017-04-17  本文已影响448人  qxy

React Native (一):基础
React Native (二):StatusBar 、 NavigationBar 与 TabBar
React Native (三):自定义视图
React Native (四):加载新闻列表
React Native (五):上下拉刷新加载
React Native (六):加载所有分类与详情页

项目地址

React Native App 的视图结构

首先把 setup.jsRoot 以及 布局 的代码改一下:

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


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

});

React Native 的所有界面都是在一个主视图上,这里的这个 <View>iOS 中的 Window 是同样的,这里跟 Android 不太一样。

当然运行在 iOSAndroid 中还是以 ViewControllerActivity 展示的。

StatusBar

iOSAndroidStatusBar 是差不多的,都是顶部那高度 20 的部分,用来显示信号、电量等系统的信息。

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 的配置可以看这里,注意有些属性只针对特定平台。

这样可以设置整个 AppStatusBar 的样式,如果有某个页面 AStatusBar 需要特殊处理,那么就在 A 页面加入 StatusBar 进行设置。

Navigator

我们需要用 Navigator 来让整个 App 可以在页面之间跳转。

NavigatoriOS 的一样,都是对页面进行 pushpop ,跟 AndroidNavigationView 不是一个东西。

官方文档在这里

现在在 App 文件夹内创建一个新的文件 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'

    },
});


然后在 setupStatusBar 下面加入 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 是为了方便后续界面间传递参数用的
    }}
/>

其中 initialRoute 设置了 component ,是最底层的第一个页面。

然后 renderScene 控制 push 的时候做哪些操作,这里的 BackAndroid.addEventListener 是监听了 Android 的物理返回按键。

现在运行可以看见页面中间有个 main

你可能会发现为什么没 NavigationBar 呢,我们后面再加。

tab-navigator

官方并没有 TabBar ,我们使用一个第三方 react-native-tab-navigator

在项目根目录执行命令

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>

配置也比较易懂。

另外创建 3 个文件 Home.jsSatin.jsSetting.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'
    }
})

可以给每个设置不同的颜色,这样点击界面切换也很明显。

具体的代码可以看 项目

NavigationBar

同意官方也没有提供 NavigationBar,我们需要自定义一个。

然后在 Home.jsSatin.jsSetting.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'
    }
})

navibarnavibar

项目地址

上一篇 下一篇

猜你喜欢

热点阅读