最近做一个react native
的项目,浅浅记录一下初始化配置,目标是构建一个底部的导航栏包含四个板块,同时每个页面内都能实现从主页面到二级页面的跳转。
初始化
官网给出了一些版本上的要求,如果是旧项目一定要去找对应版本的文档:
react-native
>= 0.63.0expo
>= 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. EditMainActivity.kt
orMainActivity.java
file which is located underandroid/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
时进行导航栏配置的一些步骤,欢迎大家提出更好的建议。