极客笔记在Snack中使用Material Bottom Tab Navigator
选项卡用于在应用程序中实现多页面视图。选项卡通常位于屏幕的顶部或底部。一些库允许在移动应用中创建选项卡。选项卡可以使用图标而不是文本标签。本文展示了React Native和JavaScript代码的两个不同示例，其中第一个示例使用’@react-navigation/material-bottom-tabs’中的createMaterialBottomTabNavigator来创建选项卡，然后将其作为标签进行渲染。在另一个示例中，使用Ionicons中的图标创建选项卡，然后将其渲染在设备屏幕上。
步骤-1
步骤1 导入来自’react-native’的Text、View和StyleSheet。
步骤2 导入’@react-navigation/native’中的NavigationContainer，然后导入’@react-navigation/material-bottom-tabs’中的createMaterialBottomTabNavigator。
步骤3 编写单独的箭头函数来显示不同页面的内容。
步骤4 创建App.js并编写代码。使用createMaterialBottomTabNavigator()创建一个BtmTbs。
步骤5 创建NavigationContainer标签，并在其内部创建BtmTbs.Navigator。从不同的BtmTbs.Screen中调用页面内容函数。
步骤6 检查结果。
示例1：使用’@react-navigation/material-bottom-tabs’创建标签类型的选项卡
在此示例中，使用’@react-navigation/material-bottom-tabs’中的createMaterialBottomTabNavigator创建标签类型的选项卡。
项目中使用的重要文件
- App.js
App.js： 这是该项目的主要JavaScript文件。
import{Component}from'react';
import{Text,View,StyleSheet}from'react-native';
import{NavigationContainer}from'@react-navigation/native';
import{createMaterialBottomTabNavigator}from'@react-navigation/material-bottom-tabs';
constBtmTbs=createMaterialBottomTabNavigator();
exportdefaultclassBottomBtmTbsExampleOneextendsComponent{
render(){
return(
<NavigationContainer>
<BtmTbs.Navigator
initialRouteName="My_Home"
activeColor="#c00"
inactiveColor="#ffe"
barStyle={{backgroundColor:'#2a2'}}>
<BtmTbs.Screenname="My_Home"component={AddressHome}/>
<BtmTbs.Screenname="My_School"component={AddressSchool}/>
<BtmTbs.Screenname="My_Ofiice"component={AddressOffice}/>
</BtmTbs.Navigator>
</NavigationContainer>
);
}
}
AddressHome=()=>(
<Viewstyle={styles.Addresscontents}>
<Textstyle={styles.AddressHeader}>MyHomeAddress</Text>
<Textstyle={styles.AddressHeader}>______________</Text>
<br/>
<Textstyle={styles.AddressContent}>AddressDetailsHere...</Text>
</View>
);
AddressSchool=()=>(
<Viewstyle={styles.Addresscontents}>
<Textstyle={styles.AddressHeader}>MySchoolAddress</Text>
<Textstyle={styles.AddressHeader}>______________</Text>
<br/>
<Textstyle={styles.AddressContent}>AddressDetailsHere...</Text>
</View>
);
AddressOffice=()=>(
<Viewstyle={styles.Addresscontents}>
<Textstyle={styles.AddressHeader}>MyOfficeAddress</Text>
<Textstyle={styles.AddressHeader}>______________</Text>
<br/>
<Textstyle={styles.AddressContent}>AddressDetailsHere...</Text>
</View>
);
conststyles=StyleSheet.create({
Addresscontents:{
flex:1,
width:'100%',
padding:10,
marginTop:10,
borderWidth:1,
borderColor:'black',
},
AddressHeader:{
color:'black',
fontSize:28,
textAlign:'center',
},
});
输出
结果可以在线上看到。当用户输入代码时，默认选中Web视图，并且结果会立即显示出来。
步骤-2
步骤1 – 从 ‘react-native’ 中导入 Text、View 和 StyleSheet。从 ‘react-native-vector-icons/Ionicons’ 导入 Icon。还从 ‘react-navigation’ 中导入 createAppContainer。
步骤2 – 编写单独的函数来显示不同页面的内容。
步骤3 – 创建 App.js 并编写代码。创建名为 My_Home、My_School 和My_Office 的类来创建屏幕。
步骤4 – 使用 createMaterialBottomTabNavigator() 创建一个 BtmTbs。使用 tabBarIcon 来选择图标并设置图标属性。
步骤5 – 使用 createAppContainer 并使用 BtmTbs 作为参数。从不同的 BtmTbs.Screen 中调用页面内容函数。
步骤6 – 检查结果。
示例2：在Snack中使用Ionicons制作选项卡
项目中使用的重要文件是
- App.js
App.js：这是该项目的主要JavaScript文件。
示例
import {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {createAppContainer} from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
class My_Home extends Component {
render() {
return (
<View style={styles.Addresscontents}>
<Text style={styles.AddressHeader}>My Home Address</Text>
<Text style={styles.AddressHeader}>______________</Text>
<br/>
<Text style={styles.AddressContent}>Home Address Details Here...</Text>
</View>
);
}
}
class My_School extends Component {
render() {
return (
<View style={styles.Addresscontents}>
<Text style={styles.AddressHeader}>My School Address</Text>
<Text style={styles.AddressHeader}>______________</Text>
<br/>
<Text style={styles.AddressContent}>School Address Details Here...</Text>
</View>
);
}
}
class My_Office extends Component {
render() {
return (
<View style={styles.Addresscontents}>
<Text style={styles.AddressHeader}>My Office Address</Text>
<Text style={styles.AddressHeader}>______________</Text>
<br/>
<Text style={styles.AddressContent}>Office Address Details Here...</Text>
</View>
);
}
}
const BtmTbs = createMaterialBottomTabNavigator(
{
My_Home: {
screen: My_Home,
navigationOptions:{
tabBarLabel:'My_Home',
tabBarIcon: () => (
<View>
<Icon size={25} name={'ios-home'}/>
</View>),
}
},
My_School: {
screen: My_School,
navigationOptions:{
tabBarLabel:'My_School',
tabBarIcon: () => (
<View>
<Iconsize={25} name={'school'}/>
</View>),
activeColor:"#c00",
inactiveColor:"#ffe",
barStyle: { backgroundColor: '#2a2' },
}
},
My_Office: {
screen: My_Office,
navigationOptions:{
tabBarLabel:'My_Office',
tabBarIcon: () => (
<View>
<Iconsize={25} name={'headset'}/>
</View>),
activeColor:"#c00",
inactiveColor:"#ffe",
barStyle: { backgroundColor: '#2a2' },
}
},
},
{
initialRouteName: "My_Home",
activeColor:"#c00",
inactiveColor:"#ffe",
barStyle: { backgroundColor: '#2a2' },
},
);
const styles = StyleSheet.create({
Addresscontents: {
flex: 1,
width: '100%',
padding: 10,
marginTop: 10,
borderWidth: 1,
borderColor: 'black',
},
AddressHeader: {
color: 'black',
fontSize: 28,
textAlign: 'center',
},
});
export default createAppContainer(BtmTbs);
输出
结果可以在线上看到。当用户输入代码时，默认选择Web视图，结果立即显示出来。
