React-navigator之TabNavigtion2

最新推荐文章于 2024-04-05 13:20:49 发布

原创最新推荐文章于 2024-04-05 13:20:49 发布 · 831 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#TabNavigation

ReactNative 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用 React Native 和 react-navigation 创建的 TabNavigator 示例。该示例包括五个不同的标签页：Home、People、Chat、Settings，每个标签页都有相应的图标和标题。文章详细展示了如何配置 TabNavigator 的样式和选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例：

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

import { TabNavigator } from 'react-navigation';

// import Ionicons from 'react-native-vector-icons/Ionicons'; 访问不到，暂且使用Image替换使用。

const MyNavScreen = ({ navigation, banner }) => (
  <ScrollView style={styles.container}>
    <Text style = {{fontSize : 30 , alignSelf : 'center' , color : 'red' }}>{banner}</Text>
  </ScrollView>
);


const MyHomeScreen = ({ navigation }) => (
	<View>
         <MyNavScreen banner="Home Tab" navigation={navigation} />
	</View>
);

MyHomeScreen.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: () => (
     <View>
          <Image
             source={require('./img/icon_1.png')}
             style={styles.icon}
          />
     </View>  
  ),
};

const MyPeopleScreen = ({ navigation }) => (
  <View>
       <MyNavScreen banner="People Tab" navigation={navigation} />
  </View>

);

MyPeopleScreen.navigationOptions = {
  tabBarLabel: 'People',
  tabBarIcon: () => (
     <View>
          <Image
             source={require('./img/icon_1.png')}
             style={styles.icon}
          />
     </View>  
  ),

};

const MyChatScreen = ({ navigation }) => (
	<View>
       <MyNavScreen banner="Chat Tab" navigation={navigation} />
    </View>
);

MyChatScreen.navigationOptions = {
  tabBarLabel: 'Chat',
  tabBarIcon: () => (
     <View>
          <Image
             source={require('./img/icon_1.png')}
             style={styles.icon}
          />
     </View>  
  ),
};

const MySettingsScreen = ({ navigation }) => (
   <View>
       <MyNavScreen banner="Settings Tab" navigation={navigation} />
    </View>
);

MySettingsScreen.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: () => (
     <View>
          <Image
             source={require('./img/icon_1.png')}
             style={styles.icon}
          />
     </View>  
  ),
};

const MyFirstProject = TabNavigator({
    Home: {
      screen: MyHomeScreen,
      path: 'home',
    },
    People: {
      screen: MyPeopleScreen,
      path: 'people',
    },
    Chat: {
      screen: MyChatScreen,
      path: 'chat',
    },
    Settings: {
      screen: MySettingsScreen,
      path: 'settings',
    },
  },
  {
    tabBarOptions: {
      activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
       inactiveTintColor: '#999', // 文字和图片未选中颜色
          showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
          showLabel: true, // android 是否展现文字 默认 true 
          upperCaseLabel : false, //android 文字是否需要大写 默认true 
          pressColor : 'blue', // android 按压时显示的颜色 
          scrollEnabled : false,
          indicatorStyle: {
              height: 2  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
          }, 
          style: {
              backgroundColor: '#ff6449', // TabBar 背景色
              // height: 50,

          },
          labelStyle: {
              fontSize: 15, // 文字大小
              paddingTop:0,
              marginTop:0,
          },
          tabStyle:{
          	  marginTop:10,
              height: 50,
          },
    },
  }
);

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
   icon: {
    width: 20,
    height: 20,
  },
});

AppRegistry.registerComponent('MyFirstProject' , () => MyFirstProject);

原链接

效果：