第三章 React-Native react-navigatio

作者: 读书的鱼 | 来源:发表于2019-06-27 13:56 被阅读0次

3-1 一个小demo展示

这部分代码在git@github.com:fx35792/react_native_study.git的createBottomTopNavigator分支上
因为需要用到图标所以我们要使用一个第三方库react-native-vector-ions

yarn add react-native-vector-icons

react-native link react-native-vector-icons

//navigators/AppNavigators.js

import React from 'react';
import {createStackNavigator, createBottomTabNavigator, createMaterialTopTabNavigator} from 'react-navigation';
import {Button, Platform} from 'react-native';
import Login from '../pages/Login';
import HomePage from '../pages/HomePage';
import Page1 from '../pages/Page1';
import Page2 from '../pages/Page2';
import Page3 from '../pages/Page3';
import Page4 from '../pages/Page4';
import Page5 from '../pages/Page5';

import Ionicons from 'react-native-vector-icons/Ionicons'

//设置头部导航
const AppMaterialTopTabNavigator = createMaterialTopTabNavigator({
    Page1: {
        screen: Page1,
        navigationOptions: {
            tabBarLabel: 'All'
        }
    },
    Page2: {
        screen: Page2,
        navigationOptions: {
            tabBarLabel: 'IOS'
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: {
            tabBarLabel: 'React'
        }
    },
    Page4: {
        screen: Page4,
        navigationOptions: {
            tabBarLabel: 'React Native'
        }
    },
    Page5: {
        screen: Page5,
        navigationOptions: {
            tabBarLabel: 'Android'
        }
    }
}, {
    tabBarOptions: {
        tabStyle: {
            mindWidth: 50,
        },
        upperCaseLabel: false,//是否使标签大写，默认true
        scrollEnabled: true,//是否支持选项卡滑动，默认false
        style: {
            backgroundColor: '#678' //tabBar 背景色
        },
        indicatorStyle: {
            height: 2,
            backgroundColor: 'white'
        },//标签指示器的样式
        labelStyle: {
            fontSize: 13,
            marginTop: 6,
            marginBottom: 6
        }//文字的样式
    }
});


//设置底部导航
const AppBottomTabNavigator = createBottomTabNavigator({
    Page1: {
        screen: Page1,
        navigationOptions: {
            tabBarLabel: '最热',
            tabBarIcon: ({titleColor, focused}) => (
                <Ionicons
                    name={'ios-home'}
                    size={26}
                    style={{color: titleColor}}
                />
            )
        }
    },
    Page2: {
        screen: Page2,
        navigationOptions: {
            tabBarLabel: '推荐',
            tabBarIcon: ({titleColor, focused}) => (
                <Ionicons
                    name={'ios-aperture'}
                    size={26}
                    style={{color: titleColor}}
                />
            )
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: {
            tabBarLabel: '趋势',
            tabBarIcon: ({titleColor, focused}) => (
                <Ionicons
                    name={'ios-people'}
                    size={26}
                    style={{color: titleColor}}
                />
            )
        }
    },
    Page4: {
        screen: Page4,
        navigationOptions: {
            tabBarLabel: '我',
            tabBarIcon: ({titleColor, focused}) => (
                <Ionicons
                    name={'ios-person'}
                    size={26}
                    style={{color: titleColor}}
                />
            )
        }
    }
}, {
    tabBarOptions: {
        activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff'
    }
});


export const AppStackNavigator = createStackNavigator({
    HomePage: {
        screen: HomePage
    },
    Page1: {
        screen: Page1,
        navigationOptions: ({navigation}) => ({
            title: `${navigation.state.params.name}页面名`
        })
    },
    Page2: {
        screen: Page2,
        navigationOptions: {
            title: 'This is Page2'
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: (props) => {
            const {navigation} = props;
            const {state, setParams} = navigation;
            const {params} = state;
            return {
                title: params.title ? params.title : 'This is Page3',
                headerRight: (
                    <Button
                        title={params.mode === 'edit' ? '保存' : '编辑'}
                        onPress={() =>
                            setParams({
                                mode: params.mode === 'edit' ? '' : 'edit'
                            })
                        }
                    />
                )
            }
        }
    },
    Page4: {
        screen: Page4,
        navigationOptions: {
            title: 'This is Page4'
        }
    },
    Page5: {
        screen: Page5,
        navigationOptions: {
            title: 'This is Page5'
        }
    },
    Login: {
        screen: Login,
        navigationOptions: {
            title: 'This is Login'
        }
    },
    Bottom: {
        screen: AppBottomTabNavigator,
        navigationOptions: {
            title: 'This is Bottom'
        }
    },
    Top: {
        screen: AppMaterialTopTabNavigator,
        navigationOptions: {
            title: 'This is Top'
        }
    }
});

//pages/HomePage.js

import React, {Component} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';

type Props = {};
export default class HomePage extends Component<Props> {
    static navigationOptions = {
        title: 'Home',
        headerBackTitle: '返回哈哈'//设置返回此页面的返回按钮文案，长度有限制
    };

    render() {
        const {navigation} = this.props;
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome to HomePage!</Text>
                <Button
                    title={'Go to Page1'}
                    onPress={() => {
                        navigation.navigate('Page1', {
                            name: '动态的'
                        })
                    }}
                />
                <Button
                    title={'Go to Page2'}
                    onPress={() => {
                        navigation.navigate('Page2')
                    }}
                />
                <Button
                    title={'Go to Page3'}
                    onPress={() => {
                        navigation.navigate('Page3', {
                            name: 'Dell'
                        })
                    }}
                />
                <Button
                    title={'Go to Bottom'}
                    onPress={() => {
                        navigation.navigate('Bottom')
                    }}
                />
                <Button
                    title={'Go to Top'}
                    onPress={() => {
                        navigation.navigate('Top')
                    }}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

3-2 createMaterialTopTabNavigator相关的Api

createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig):

RouteConfigs(必选)：路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么。
TabNavigatorConfig(可选)：配置导航器的路由(如：默认首屏，navigationOptions，paths等)样式(如，转场模式mode、头部模式等)。

从createMaterialTopTabNavigator API上可以看出createMaterialTopTabNavigator支持通过RouteConfigs和 TabNavigatorConfig两个参数来创建createMaterialTopTabNavigator导航器。

RouteConfigs

RouteConfigs支持三个参数screen、path以及navigationOptions；

screen(必选)：指定一个 React 组件作为屏幕的主要显示内容，当这个组件被TabNavigator加载时，它会被分配一个navigation prop。
path(可选)：用来设置支持schema跳转时使用，具体使用会在下文的有关Schema章节中讲到；
navigationOptions(可选)：用以配置全局的屏幕导航选项如：title、headerRight、headerLeft等；

TabNavigatorConfig

tabBarComponent：指定TabNavigator的TabBar组件；
tabBarPosition: 用于指定TabBar的显示位置，支持’top’ 与 ‘bottom’两种方式；
swipeEnabled : 是否可以左右滑动切换tab；
lazy - 默认值是 false。如果是true，Tab 页只会在被选中或滑动到该页时被渲染。当为 false 时，所有的 Tab 页都将直接被渲染；（可以轻松实现多Tab 页面的懒加载）；
optimizationsEnabled -是否将 Tab 页嵌套在到 <resourcesavingscene style="box-sizing: border-box;"></resourcesavingscene>中。如果是，一旦该 Tab 页失去焦点，将被移出当前页面, 从而提高内存使用率。
animationEnabled : 切换页面时是否有动画效果。
initialLayout : 包含初始高度和宽度的可选对象可以被传递以防止react-native-tab-view呈现中的一个帧延迟；
tabBarOptions: 配置TaBar下文会详细讲解；
initialRouteName : 默认页面组件，TabNavigator显示的第一个页面；
order: 定义tab顺序的routeNames数组。
paths: 提供routeName到path config的映射，它覆盖routeConfigs中设置的路径。
backBehavior: 后退按钮是否会导致标签切换到初始tab？如果是，则设切换到初始tab，否则什么也不做。默认为切换到初始tab。

tabBarOptions（tab配置）

activeTintColor: 设置TabBar选中状态下的标签和图标的颜色；
inactiveTintColor: 设置TabBar非选中状态下的标签和图标的颜色；
showIcon: 是否展示图标，默认是false；
showLabel: 是否展示标签，默认是true；
upperCaseLabel - 是否使标签大写，默认为true。
tabStyle: 设置单个tab的样式；
indicatorStyle: 设置 indicator(tab下面的那条线)的样式；
labelStyle: 设置TabBar标签的样式；
iconStyle: 设置图标的样式；
style: 设置整个TabBar的样式；
allowFontScaling: 设置TabBar标签是否支持缩放，默认支持；
pressColor -Color for material ripple（仅支持 Android >= 5.0；
pressOpacity -按下标签时的不透明度（支持 iOS 和 Android < 5.0）；
scrollEnabled -是否支持选项卡滚动

navigationOptions（屏幕导航选项）

createMaterialTopTabNavigator支持的屏幕导航选项的参数有：

title: 可以用作headerTitle和tabBarLabel的备选的通用标题。
swipeEnabled：是否允许tab之间的滑动切换，默认允许；
tabBarIcon: 设置TabBar的图标；
tabBarLabel: 设置TabBar的标签；
tabBarOnPress: Tab被点击的回调函数，它的参数是一保函一下变量的对象：
navigation：页面的 navigation props
defaultHandler: tab press 的默认 handler
tabBarAccessibilityLabel：选项卡按钮的辅助功能标签。当用户点击标签时，屏幕阅读器会读取这些信息。如果您没有选项卡的标签，建议设置此项；
tabBarTestID：用于在测试中找到该选项卡按钮的 ID；

3-3 createBottomTabNavigator相关的Api

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig):

RouteConfigs(必选)：路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么。
BottomTabNavigatorConfig(可选)：配置导航器的路由(如：默认首屏，navigationOptions，paths等)样式(如，转场模式mode、头部模式等)。

从createBottomTabNavigator API上可以看出createBottomTabNavigator支持通过RouteConfigs和 BottomTabNavigatorConfig两个参数来创建createBottomTabNavigator导航器。

RouteConfigs

RouteConfigs支持三个参数screen、path以及navigationOptions；

screen(必选)：指定一个 React 组件作为屏幕的主要显示内容，当这个组件被TabNavigator加载时，它会被分配一个navigation prop。
path(可选)：用来设置支持schema跳转时使用，具体使用会在下文的有关Schema章节中讲到；
navigationOptions(可选)：用以配置全局的屏幕导航选项如：title、headerRight、headerLeft等；

BottomTabNavigatorConfig

tabBarComponent：指定createBottomTabNavigator的TabBar组件，如果不指定在iOS上默认使用TabBarBottom，在Android平台上默认使用TabBarTop。
- TabBarBottom与TabBarTop都是react-navigation所支持的组件，要自定义TabBar可以重写这两个组件也可以根据需要自己实现一个；
tabBarOptions: 配置TaBar下文会详细讲解；
initialRouteName : 默认页面组件，createBottomTabNavigator显示的第一个页面；
order: 定义tab顺序的routeNames数组。
paths: 提供routeName到path config的映射，它覆盖routeConfigs中设置的路径。
backBehavior: 后退按钮是否会导致标签切换到初始tab？如果是，则设切换到初始tab，否则什么也不做。默认为切换到初始tab。

tabBarOptions（tab配置）

activeTintColor: 设置TabBar选中状态下的标签和图标的颜色；
inactiveTintColor: 设置TabBar非选中状态下的标签和图标的颜色；
showIcon: 是否展示图标，默认是false；
showLabel: 是否展示标签，默认是true；
upperCaseLabel - 是否使标签大写，默认为true。
tabStyle: 设置单个tab的样式；
indicatorStyle: 设置 indicator(tab下面的那条线)的样式；
labelStyle: 设置TabBar标签的样式；
iconStyle: 设置图标的样式；
style: 设置整个TabBar的样式；
allowFontScaling: 设置TabBar标签是否支持缩放，默认支持；
safeAreaInset：覆盖<safeareaview style="box-sizing: border-box;">的forceInset prop，默认是{ bottom: 'always', top: 'never' }，可选值：top | bottom | left | right ('always' | 'never')；</safeareaview>

navigationOptions（屏幕导航选项）

createBottomTabNavigator支持的屏幕导航选项的参数有：

title: 可以用作headerTitle和tabBarLabel的备选的通用标题。
tabBarVisible: 显示或隐藏TabBar，默认显示；
tabBarIcon: 设置TabBar的图标；
tabBarLabel: 设置TabBar的标签；
tabBarOnPress: Tab被点击的回调函数，它的参数是一保函一下变量的对象：
navigation: navigation prop ；
defaultHandler: tab按下的默认处理程序；
tabBarButtonComponent：React组件，它包装图标和标签并实现onPress。默认情况下是TouchableWithoutFeedback的一个封装，使其其表现与其它可点击组件相同，tabBarButtonComponent: TouchableOpacity 将使用 TouchableOpacity 来替代；
tabBarAccessibilityLabel：选项卡按钮的辅助功能标签。当用户点击标签时，屏幕阅读器会读取这些信息。如果您没有选项卡的标签，建议设置此项；
tabBarTestID：用于在测试中找到该选项卡按钮的 ID；

第三章 React-Native react-navigatio

3-1 一个小demo展示

3-2 createMaterialTopTabNavigator相关的Api

RouteConfigs

TabNavigatorConfig

tabBarOptions（tab配置）

navigationOptions（屏幕导航选项）

3-3 createBottomTabNavigator相关的Api

RouteConfigs

BottomTabNavigatorConfig

tabBarOptions（tab配置）

navigationOptions（屏幕导航选项）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读