react-native路由总结
安装
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项目的android/app/build.gradle中的dependencies部分
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'堆栈导航
- NavigationContainer 路由容器
- createStackNavigator 创建堆栈导航方法
导入组件：
import {
NavigationContainer } from '@react-navigation/native';
// 导入导航容器
import {
createStackNavigator } from '@react-navigation/stack';
// 导入创建堆栈导航方法创建导航
const Stack = createStackNavigator();创建导航需要的页面
function Home() {
return (
<View>
<Text>首页</Text>
</View>
);
}
function Details() {
return (
<View>
<Text>详情页面</Text>
</View>
);
}包装页面
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: '首页' }}
/><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>顶部导航
导入组件
import {
NavigationContainer } from '@react-navigation/native';
// 导入导航容器
import {
createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
// 导入创建顶部部导航方法
创建导航
const TabTop = createMaterialTopTabNavigator();创建导航需要页面
function Hot() {
return (
<View>
<Text>推荐</Text>
</View>
);
}
function Channel() {
return (
<View>
<Text>频道页面</Text>
</View>
);
}包装页面
function Main(props){
return(
<TabTop.Navigator tabBarOptions={
{
activeTintColor:"#f30",
indicatorStyle:"#f30",
inactiveTintColor:"#999",
tabStyle: {
width: 150 },
scrollEnabled:true
}}>
<TabTop.Screen name="hot" component={
home} options={
{
tabBarLabel:'推荐'}} />
<TabTop.Screen name="p1" component={
Channel} options={
{
tabBarLabel:'段子'}} />
<TabTop.Screen name="p2" component={
Channel} options={
{
tabBarLabel:'汽车'}} />
<TabTop.Screen name="p3" component={
Channel} options={
{
tabBarLabel:'娱乐'}}/>
<TabTop.Screen name="p4" component={
Channel} options={
{
tabBarLabel:'军事'}}/>
<TabTop.Screen name="p5" component={
Channel} options={
{
tabBarLabel:'体育'}}/>
</TabTop.Navigator>)
}
export default Main;tabBarOptions
activeTintColor:"#f30", // 激活颜色
indicatorStyle:"#f30", // 标记线颜色
inactiveTintColor:"#999", // 未激活颜色
tabStyle: {
width: 150 }, // 标签栏样式
scrollEnabled:true // 滚动标签栏底部导航
导入组件
import {
NavigationContainer } from '@react-navigation/native';
// 导入导航容器
import {
createBottomTabNavigator} from '@react-navigation/bottom-tabs'
// 导入创建底部导航方法
创建导航
const Tab = createBottomTabNavigator();创建导航需要页面
function Home() {
return (
<View>
<Text>首页</Text>
</View>
);
}
function Details() {
return (
<View>
<Text>详情页面</Text>
</View>
);
}
包装页面
function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen component={
Home} name="Home" />
<Tab.Screen component={
Details} name="Details" />
</Tab.Navigator>
</NavigationContainer>
);
}
export default App;导航切换
<Button title="用户中心"
onPress={
() => this.props.navigation.navigate('user')} />嵌套路由导航切换
navigation.navigate('Root', {
screen: 'Settings',
params: {
user: 'jane' },
});