ReactNative-导航条（StackNavigator）与标签栏（TabNavigator）组合

最新推荐文章于 2025-03-12 09:10:37 发布

转载最新推荐文章于 2025-03-12 09:10:37 发布 · 382 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/huangyn/blog/2980530

文章标签：

#javascript #移动开发 #python #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

开始写时不是很顺利，磕磕碰碰也算框架搭建出来了，记录一下，算是一个开始吧

1.基本目录结构

2.App.js文件

3.YNMain.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import { StyleSheet} from 'react-native';
//导入外部文件
import NavigatorTextOne from './NavigatorTextOne';
import YNTestButtomNavigator from './YNTestButtomNavigator';

import { createStackNavigator, createAppContainer} from 'react-navigation';


//创建StackNavigator
const YNMain = createStackNavigator({
        Home:{
            screen:YNTestButtomNavigator,
        },
        NavigatorTextOne:{
            screen:NavigatorTextOne,
        },
    },
    {
        initialRouteName: 'Home',
    }
);

export default createAppContainer(YNMain);

4.YNTestButtomNavigation.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

//导入外包文件
import YNHome from '../Home/YNHome';
import YNShop from '../Shop/YNShop';
import YNMine from '../Mine/YNMine';
import YNMore from '../More/YNMore';

import {createAppContainer, createBottomTabNavigator} from 'react-navigation';

export default YNTestButtomNavigator = createBottomTabNavigator({


    Home:{
        screen:YNHome,
        navigationOptions:{
            //tab 的属性的属性
            tabBarLabel:'首页',
            tabBarIcon:({tintColor, focused}) => (
               focused ?
                <Image
                    source={{uri:'icon_tabbar_homepage_selected'}}
                    style={styles.iconStyle}

                />
                :
                <Image
                    source={{uri:'icon_tabbar_homepage'}}
                    style={styles.iconStyle}
                />
            )
        }
    },

    YNShop:{
        screen:YNShop,
        navigationOptions:{
            //tab 的属性
            tabBarLabel:'商店',
            tabBarIcon:({tintColor, focused}) =>(
            focused ?
                <Image
                    source={{uri:'icon_tabbar_merchant_selected'}}
                    style={styles.iconStyle}

                />
                :
                <Image
                    source={{uri:'icon_tabbar_merchant_normal'}}
                    style={styles.iconStyle}
                />
            )
        }
    },

    YNMine:{
        screen:YNMine,
        navigationOptions:{
               //tab 属性
            tabBarLabel:'我的',
            tabBarIcon:({tintColor, focused}) =>(
            focused ?
                <Image
                    source={{uri:'icon_tabbar_mine_selected'}}
                    style={styles.iconStyle}

                />
                :
                <Image
                    source={{uri:'icon_tabbar_mine'}}
                    style={styles.iconStyle}
                />
            )
        }
    },

    YNMore:{
        screen:YNMore,
        navigationOptions:{
            //tab 属性
            tabBarLabel:'更多',
            tabBarIcon:({tintColor, focused}) =>(
            focused ?
                <Image
                    source={{uri:'icon_tabbar_misc_selected'}}
                    style={styles.iconStyle}

                />
                :
                <Image
                    source={{uri:'icon_tabbar_misc'}}
                    style={styles.iconStyle}
                />
            )

        }
    },
    },
    {
        //设置TabNavigator的位置
        tabBarPosition: 'bottom',
        //是否在更改标签时显示动画
        animationEnabled: true,
        //是否允许在标签之间进行滑动
        swipeEnabled: true,
        //按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
        backBehavior: "none",
        //进入App的首页
        initialRouteName:'Home',
        //设置Tab标签的属性
        tabBarOptions: {
            //Android属性
            upperCaseLabel: false,//是否使标签大写，默认为true
            //共有属性
            showIcon: true,//是否显示图标，默认关闭
            showLabel: true,//是否显示label，默认开启
            activeTintColor: 'orange',//label和icon的前景色 活跃状态下（选中）
            inactiveTintColor: 'gray',//label和icon的前景色 活跃状态下（未选中）
        },
        navigationOptions: ({navigation}) => ({
            title: navigation.state.routeName,
            headerStyle: {backgroundColor: '#fff',},
            headerTintColor: color.activeBarText,
            headerTitleStyle: {fontWeight: 'bold',},
        }),

   });
//导航条上的内容展示
YNTestButtomNavigator.navigationOptions = ({navigation}) => {
    let {routeName} = navigation.state.routes[navigation.state.index];
    // You can do whatever you like here to pick the title based on the route name
    let headerTitle = routeName;
    return {
        headerTitle,
    };
};



const styles = StyleSheet.create({
    iconStyle:{

        width:Platform.OS === 'ios' ? 30 :25,
        height:Platform.OS === 'ios' ? 30 :25
    },
});

5.YNHome.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

class YNHome extends React.Component {
    
    render() {
        //导航条设置
        const {navigate} = this.props.navigation;

        return (
            <View style={styles.container}>

                <Text style={styles.welcome}>首nnnnn页</Text>

                <Button
                    title="Go to NavigatorTextOne"
                    onPress={() => this.props.navigation.navigate('NavigatorTextOne', {name: '这是传递到NavigatorThree页面的参数Name:nihao',title: '需要传递的参数bioati'})}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

export {YNHome as default};

6. NavigatorTextOne.js文件

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

class NavigatorTextOne extends React.Component{

    static navigationOptions = {

        headerTitle:'首页iiiii'
    }

    render(){


        const {state} = this.props.navigation;


        return(
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>{state.params.name}</Text>
            </View>
        );
    }
}



export {NavigatorTextOne as default};

7.YNMine.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

class YNMine extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>我的</Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

export {YNMine as default};

8.YNMore.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

class YNMore extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>更多</Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

export {YNMore as default};

9.YNShop.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

class YNShop extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>商家</Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

export {YNShop as default};

效果图：