第三章 React-Native react-navigatio

2019-06-27  本文已影响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):

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

RouteConfigs

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

TabNavigatorConfig
tabBarOptions（tab配置）
navigationOptions（屏幕导航选项）

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

3-3 createBottomTabNavigator相关的Api

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig):

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

RouteConfigs

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

BottomTabNavigatorConfig

tabBarOptions（tab配置）

navigationOptions（屏幕导航选项）

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

上一篇 下一篇

猜你喜欢

热点阅读