关注我们

React Native - 顶部导航

Material样式createMaterialTopTabNavigator用于在屏幕顶部创建选项卡导航器。它提供了创建和显示多个屏幕路由器的函数。这些屏幕是通过点击路由或水平滑动来在彼此之间切换的屏幕。

react-navigation库的createMaterialTopTabNavigator函数有助于我们实现顶部标签导航器。

createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig);

顶部导航示例

让我们创建一个带有自定义状态栏和标题部分的顶部标签导航器。在此示例中，我们将为"Home"，"Profile"和"Settings"路由器创建三个不同的屏幕。每个路由器屏幕都在单独的文件中创建。

应用程序的目录结构

在您的路线项目中创建一个src目录。在src目录中，创建index.js文件以及另外两个目录lib和screen。在screens目录中，我们放置了三个屏幕文件index.js(HomeScreen)，profile.js(ProfileScreen)和settings.js(SettingsScreen)。在lib目录中，我们实现createMaterialTopTabNavigator来创建顶部标签导航器。

topNavigation/index.js

在topNavigation/index.js文件中进行一些更改(将"./App"替换为"./src")。

复制代码

import {AppRegistry} from 'react-native';
import App from './src';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

创建类并从"react-native-vector-icons/Ionicons"包中导入Icon。实现tabBarIcon并在其中添加Icon标记。

链接：https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-create-material-top-tab-navigator.html

来源：LearnFk无涯教程网

src/screens/index.js

复制代码

import React, {Component} from 'react';
import {View,Text} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
export default class HomeScreen extends Component{
    render() {
        return(
            <View>
                <Text>This is Home Screen</Text>
            </View>
        )
    }
}
HomeScreen.navigationOptions={
            tabBarIcon:({tintColor, focused})=>(
            <Icon
                name={focused ? 'ios-home' : 'md-home'}
                color={tintColor}
                size={25}
            />
        )
}

src/screens/profile.js

复制代码

import React, {Component} from 'react';
import {View,Text} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
export default class ProfileScreen extends Component{
    render(){
        return(
            <View>
                <Text>this is profile screen</Text>
            </View>
        )
    }
}
ProfileScreen.navigationOptions={
    tabBarIcon:({tintColor, focused})=>(
        <Icon
            name={focused ? 'ios-person' : 'md-person'}
            color={tintColor}
            size={25}
        />
    )
}

src/screens/settings.js

复制代码

import React, {Component} from 'react';
import {View,Text} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
export default class SettingScreen extends Component{
    render(){
        return(
            <View>
                <Text>this is setting screen</Text>
            </View>
        )
    }
}
SettingScreen.navigationOptions={
    tabBarIcon:({tintColor, focused})=>(
        <Icon
            name={focused ? 'ios-settings' : 'md-settings'}
            color={tintColor}
            size={25}
        />
    )
}

src/lib/lifer.js

在router.js文件中，导入“react-navigation"库的createMaterialTopTabNavigator和createAppContainer函数。还要在其中导入所有路由器类，并按照我们希望在选项卡导航器顶部显示的顺序放置它们。

activeTintColor - 设置活动路由颜色。
showIcon - show {true} 和 hide{false}路由器的图标。
showLabel: - show {true} 和 hide{false}路由器的标题。默认情况下，它是true。

复制代码

import React from 'react';
import {createMaterialTopTabNavigator,createAppContainer} from 'react-navigation';
import HomeScreen from "../screens/index";
import ProfileScreen from "../screens/profile";
import SettingScreen from "../screens/settings";

const AppNavigator = createMaterialTopTabNavigator(
    {
        Home: HomeScreen,
        Profile: ProfileScreen,
        Settings: SettingScreen,
    },
    {
        tabBarOptions: {
            activeTintColor: 'white',
            showIcon: true,
            showLabel:false,
            style: {
                backgroundColor:'red'
            }
        },
    }
)
export default createAppContainer(AppNavigator);

src/index.js

从"./lib/router"导入appnavigator，并在文件中为Const AppIndex分配AppNavigator。使用StatusBar标记自定义状态栏，并在标签导航器顶部添加标题

复制代码

import React, {Component} from 'react';
import {StyleSheet, Text, View,StatusBar} from 'react-native';
import {createAppContainer} from 'react-navigation'; 
import Icon from 'react-native-vector-icons/Ionicons';

import AppNavigator from './lib/router';
const AppIndex = createAppContainer(AppNavigator)

export default class App extends Component{
    render(){
        return(
            <View style={{flex:1}} >
                <StatusBar
                    backgroundColor='red'
                    barStyle='light-content'
                />
                <View style={styles.header}>
                    <Icon name='ios-camera' size={28} color='white'/>
                    <Icon name='ios-menu' size={28} color='white'/>
                </View>
                <AppIndex/>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
    },
    header:{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: 'red',
        paddingHorizontal: 18,
        paddingTop: 5,
    }
});