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' },
});