新手如何配置react-native底部导航栏

最近做一个react native的项目，浅浅记录一下初始化配置，目标是构建一个底部的导航栏包含四个板块，同时每个页面内都能实现从主页面到二级页面的跳转。

初始化

官网给出了一些版本上的要求，如果是旧项目一定要去找对应版本的文档：

react-native >= 0.63.0
expo >= 41 (if you use Expo)
typescript >= 4.1.0 (if you use TypeScript)

安装依赖

java 复制代码

npm install @react-navigation/native react-native-screens react-native-safe-area-context

底部状态栏的依赖：

bash 复制代码

npm install @react-navigation/bottom-tabs

以上三个依赖是使用react-navigation必须安装的库，android还必须修改一项配置才能跑起来，否则会报一个找不到screen有关东西的错.

react-native-screens package requires one additional configuration step to properly work on Android devices. Edit MainActivity.kt or MainActivity.java file which is located under android/app/src/main/java/<your package name>/.

找到官网说的Android文件夹下面的MainActivity.kt，修改成这样：

kotlin 复制代码

  
import android.os.Bundle  //导入
// ... 
  
class MainActivity : ReactActivity() {  
  
 // ...
  override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(null)
    }  
}

基本结构

javascript 复制代码

export default function App() {  
return (  
<NavigationContainer>  
	<Tab.Navigator>  
		<Tab.Screen name="Home" component={HomeScreen} />  
		<Tab.Screen name="Settings" component={SettingsScreen} />  
	</Tab.Navigator>  
</NavigationContainer>  
	);  
}

其实在recat-navigation中，screen的概念很像是vue-router中的router-view,之后不管是通过导航栏跳转还是通过useNavigation这个hook函数跳转，记录的页面都是screen页面.

Tab.Navigator组件可以通过添加配置项实现自己的icon定制化等功能，官网实例的tabBarIcon如下：

javascript 复制代码

<Tab.Navigator  
screenOptions={({ route }) => ({  
tabBarIcon: ({ focused, color, size }) => {  
let iconName;  
  
if (route.name === 'Home') {  
iconName = focused  
? 'ios-information-circle'  
: 'ios-information-circle-outline';  
} else if (route.name === 'Settings') {  
iconName = focused ? 'ios-list' : 'ios-list-outline';  
}  
  
// You can return any component that you like here!  
return <Ionicons name={iconName} size={size} color={color} />;  
},  
tabBarActiveTintColor: 'tomato',  
tabBarInactiveTintColor: 'gray',  
})}  
>

嵌套路由

以上是官网提供的基础使用方式，但是在实际使用的过程中，除了导航栏最基础的tab外，页面内也需要实现二级页面的跳转功能，因为这种路由跳转方式并不是通过底部tab点击的方式实现的，页面内跳转使用的是react-navigation的stack-navigation功能，所以此时需要导入新的依赖：

css 复制代码

npm i @react-navigation/native-stack

javascript 复制代码

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const HomeStack = createNativeStackNavigator();  
  
function HomeStackScreen() {  
return (  
	<HomeStack.Navigator>  
		<HomeStack.Screen name="Home" component={HomeScreen} />  
		<HomeStack.Screen name="Details" component={DetailsScreen} />  
	</HomeStack.Navigator>  
);  
}  
  
  
const Tab = createBottomTabNavigator();  
  
export default function App() {  
return (  
	<NavigationContainer>  
		<Tab.Navigator screenOptions={{ headerShown: false }}>  
			<Tab.Screen name="Home" component={HomeStackScreen} />  
			<Tab.Screen name="Settings" component={SettingsStackScreen} />  
		</Tab.Navigator>  
	</NavigationContainer>  
);  
}

在HomeStackScreen中会使用stack-navigate方式来记录用户访问的页面并通过在组件之间传递一个名为navigation 的prop来实现路由跳转，一些常用:

navigation.push('RouteName')
navigation.goBack()
navigation.navigate('RouteName')可以导航至任意存在的screen。

我自己习惯使用的是创建公共跳转按钮指定到要去的页面：

ini 复制代码

const NavigateBtn: React.FC<Props> = props => {  
  const nav = useNavigation<Props>();  
  
  const handlePress = () => {  
    nav.navigate(props.navAddress);  
  };  
  return (  
    <Pressable onPress={handlePress} style={styles.container}>  
        <Text style={props.styles}>{props.title}</Text>  
    </Pressable>  
  );  
};

以上就是我在刚开始使用react-native时进行导航栏配置的一些步骤，欢迎大家提出更好的建议。