推荐官网 https://reactnavigation.org/
native 路由
介绍
这里介绍三种导航
堆栈导航 stack
底部栏导航 bottom-tabs
顶部导航 top-tabs
静态导航
ezgif-2-3a4552ea069d.gif
ezgif-2-d8606d80ec2c.gif
安装
npm install @react-navigation/native
npm install @react-navigation/stack
npm install @react-navigation/bottom-tabs
npm install @react-navigation/material-top-tabs react-native-tab-view
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
配置
要完成react-native-screensAndroid的安装，请将以下两行添加到中的dependencies部分android/app/build.gradle：
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
stack 堆栈导航
- NavigationContainer 路由容器
- createStackNavigator 创建堆栈导航方法
1. 导入组件
import { NavigationContainer } from '@react-navigation/native';
// 导入导航容器
import { createStackNavigator } from '@react-navigation/stack';
// 导入创建堆栈导航方法
2. 创建导航
const Stack = createStackNavigator();
3. 创建导航需要页面
function Home() {
return (
<View>
<Text>首页</Text>
</View>
);
}
function Details() {
return (
<View>
<Text>详情页面</Text>
</View>
);
}
4. 包装页面
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Details" component={Details} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
导航
navigation 从路由组件的props中获取
navigation.push('Details') 切换页面
navigation.replace('Details') 替换页面
navigation.goBack() 返回
navigation.popToTop() 回到最顶层页面
<Button
title="再一次跳转详情"
onPress={() => navigation.push('Details')} />
<Button
title="返回"
onPress={() => navigation.goBack()} />
<Button
title="回到顶层"
onPress={() => navigation.popToTop()} />
参数传递
传递参数
<Button
title="跳转到详情"
onPress={() => {
navigation.navigate('Details', {
itemId: 86,
otherParam: '你想传递参数',
});
}}
/>
接受参数
通过props的route.params中获取参数
function DetailsScreen({ route, navigation }) {
const { itemId } = route.params;
const { otherParam } = route.params;
return (...)
}
初始化参数
<Stack.Screen
name="Details"
component={DetailsScreen}
initialParams={{ itemId: 42 }}
/>
配置标题
设置标题标题
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: '首页' }}
/>
更新options与setOptions
<Button
title="更新标题"
onPress={() => navigation.setOptions({ title: '新标题' })}
/>
标题样式
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
title: 'My home',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
/>
options跨屏幕共享
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'My home' }}
/>
</Stack.Navigator>
用自定义组件替换标题
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ headerTitle: props => <image source={}>}}
/>
</Stack.Navigator>
);
}
标题按钮
<Stack.Screen
name="Home"
component={Home}
options={{
headerRight: () => (
<Button
onPress={() => alert('设置被点击')}
title="设置"
color="#fff"
/>
),
}}
/>
StackNavigator navigationOptions 导航页面的属性和方法
title - 可用作的headerBackTitle的标题。
header - 函数返回一个React元素，用来作为标题。设置null会隐藏标题。
headerRight - 接受React Element将会显示在标题的右侧
headerStyle - 顶部栏的样式
headerTitleStyle - 标题组件的样式
扩展
navigationOptions 标签栏的属性和方法
title - 通用标题可以用作headerTitle和tabBarLabel。
tabBarVisible - 显示或隐藏底部标签栏，默认为true，不隐藏。
tabBarIcon - React Element或给定{focused：boolean，tintColor：string}的函数返回一个React.Node，用来显示在标签栏中。
tabBarLabel - 接收字符串、React Element或者给定{focused：boolean，tintColor：string}的函数返回一个React.Node，用来显示在标签栏中。如果未定义，会使用title作为默认值。如果想要隐藏，可以参考上面的tabBarOptions.showLabel。
tabBarOnPress - 标签栏点击事件回调，接受一个对象，其中包含如下：
image
tabBarOnPress: async (obj: any) => {
console.log(obj);
try {
const userData = await AsyncStorage.getItem('USER_INFO');
if (userData) {
obj.defaultHandler();
}
else {
obj.navigation.navigate('Login');
}
} catch (e) {
Toast.show(e.message, 'center', 1000);
}
}
