阅读量:0
react-native 里面的导航有点繁琐，需要引入 react-navigation 这个库。也是官网推荐的。整个过程不难，就是配置比较繁琐，还会因为网络的原因，时常报错，需要多试几次。排查错误，需要多看文档。安装完依赖，必须重启项目。
效果演示
实现步骤
- 安装
npm i @react-navigation/native npm i @react-navigation/bottom-tabs - 页面使用
import React, {useEffect, useState} from 'react'; import {NavigationContainer} from '@react-navigation/native'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import Ionicons from 'react-native-vector-icons/Ionicons'; import { StyleSheet, Button, View, SafeAreaView, Text, Alert, ActivityIndicator, } from 'react-native'; const Separator = () => <View style={styles.separator} />; const Loading = () => ( <View style={styles.loadingContainer}> <ActivityIndicator size="large" color="#0000ff" /> <Text>加载中...</Text> </View> ); function HomeScreen() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', width: '100%', }}> <Text>Home!</Text> </View> ); } function SettingsScreen() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', width: '100%', }}> <Text>Settings!</Text> </View> ); } function UserCenter() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', width: '100%', }}> <Text>User Center</Text> </View> ); } const Tab = createBottomTabNavigator(); const App = () => { const [isLoading, setIsLoading] = useState(true); const handleSubmit = () => { Alert.alert( '提交成功', '您的信息已提交，我们会尽快与您联系！', [{text: '好的'}], {cancelable: false}, ); }; const handleSubmit2 = () => { Alert.alert('提交成功', '您的信息已提交,请耐心等待！', [{text: '好的'}], { cancelable: false, }); }; useEffect(() => { setTimeout(() => { setIsLoading(false); }, 3000); }); return ( <SafeAreaView style={styles.container}> {isLoading ? ( <Loading /> ) : ( <NavigationContainer> <Tab.Navigator screenOptions={({route}) => ({ tabBarIcon: ({focused, color, size}) => { let iconName; if (route.name === '消息') { iconName = focused ? 'chatbubble-ellipses-sharp' : 'chatbubble-outline'; } else if (route.name === '工作台') { iconName = focused ? 'desktop' : 'desktop-outline'; } else if (route.name === '我的') { iconName = focused ? 'person-circle' : 'person-circle-outline'; } return <Ionicons name={iconName} size={size} color={color} />; }, tabBarActiveTintColor: 'tomato', tabBarInactiveTintColor: 'gray', })}> <Tab.Screen name="消息" component={HomeScreen} options={{ tabBarBadge: 3, }} /> <Tab.Screen name="工作台" component={SettingsScreen} /> <Tab.Screen name="我的" component={UserCenter} /> </Tab.Navigator> </NavigationContainer> )} </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, width: '100%', justifyContent: 'center', }, loadingContainer: { flex: 1, justifyContent: 'center', marginHorizontal: 16, alignItems: 'center', }, title: { textAlign: 'center', marginVertical: 8, }, fixToText: { flexDirection: 'row', justifyContent: 'space-between', }, separator: { marginVertical: 8, //垂直距离 borderBottomColor: '#737373', //底部边框颜色 borderBottomWidth: StyleSheet.hairlineWidth, //底部边框宽度 }, tinyLogo: { width: 50, height: 50, }, content: { marginVertical: 16, textAlign: 'left', }, }); export default App; 默认情境下，图标是展示的一个打叉的矩形，需要我们配置好图标，才能正常展示。
配置图标
- 安装依赖
npm i react-native-vector-icons 配置图标
我这里是安卓，请按照安卓的操作方法配置,https://www.npmjs.com/package/react-native-vector-icons
把安装包下面的字体文件夹改为小写，放到指定的位置
- 查找图标，要参考官方文档：https://oblador.github.io/react-native-vector-icons/#Ionicons
- 查找图标，要参考官方文档：https://oblador.github.io/react-native-vector-icons/#Ionicons
参考导航的使用方法。
react-navigation 的官网: https://reactnavigation.org/docs/tab-based-navigation
这样我们就实现了一个导航效果，然后我们就可以继续丰富我们app的细节内容
