在本节中,我们将图标添加到“Tab Navigation"的底部。在学习本教程之前,请阅读上一个教程"Tab Navigation",在此我们描述如何实现"Bottom Tab Navigation"。
首先添加所需的库和依赖于React Native项目:
来源:LearnFk无涯教程网
1.使用以下命令添加Rect Reach Navigation库:
yarn add react-navigation
2.使用以下命令添加React Native Gesture Handler库:
yarn add react-native-gesture-handler
3.使用以下命令添加React Native Vector Icon Library:
yarn add react-native-vector-icons
成功执行上面的命令后,将这些库链接到使用Bellow命令进行本机项目:
react-native link
上面的命令在 d:\your_directory\your_reacepthepration\package.json 文件中添加以下依赖关系。
"react-native-gesture-handler": "^1.1.0", "react-native-vector-icons": "^6.3.0", "react-navigation": "^3.3.2"
d:\your_directory\your_reacectnativeproject\android\app\build.gragle
implementation project(':react-native-vector-icons') implementation project(':react-native-gesture-handler')
d:\your_directory\your_reactnativeproject\android\settings.groadle文件:
include ':react-native-vector-icons' project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-vector-icons\android') include ':react-native-gesture-handler' project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-gesture-handler\android')
在上面的路由结构中略有变化(用'/'替换为'/'):
include ':react-native-vector-icons' project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') include ':react-native-gesture-handler' project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
d:\your_directory\your_reacectnativeproject\android\app\src\main\java\com\resctnativeproject\mainapplication.java
import com.oblador.vectoricons.VectorIconsPackage; import com.swmansion.gesturehandler.react.RNGestureHandlerPackage; . . . protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new VectorIconsPackage(), new RNGestureHandlerPackage() ); }
App.js
为两个选项卡"Home"和"Profile"创建两个类"HomeScreen"和"Profilescreen"。 createBottomTabNavigator 函数在屏幕底部创建选项卡栏,为您提供在不同的路由之间切换。
将"HomeScreen"映射到"Home"和"Profilescreen"到"Profile"标题。图标标签将图标添加到选项卡导航。可以使用来自ionicons.com的不同图标名称
import React from 'react'; import {StyleSheet, Text, View} from 'react-native'; import { createBottomTabNavigator, createAppContainer } from 'react-navigation'; import Icon from 'react-native-vector-icons/Ionicons'; class HomeScreen extends React.Component { render() { return ( <View style={styles.container}> <Text>Home Screen</Text> </View> ); } } class ProfileScreen extends React.Component { render() { return ( <View style={styles.container}> <Text>Profile Screen</Text> </View> ); } } const TabNavigator = createBottomTabNavigator( { Home:{ screen:HomeScreen, navigationOptions:{ tabBarLabel:'Home', tabBarIcon:({tintColor})=>( <Icon name="ios-home" color={tintColor} size={25}/> ) } }, Profile: { screen:ProfileScreen, navigationOptions:{ tabBarLabel:'Profile', tabBarIcon:({tintColor})=>( <Icon name="ios-person" color={tintColor} size={25}/> ) } }, }, { initialRouteName: "Home" }, ); const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, }); export default createAppContainer(TabNavigator);
输出:
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)