官方文档

一、安装依赖

  1. yarn add react-navigation
  2. yarn add react-navigation-stack
  1. yarn add react-native-reanimated react-native-gesture-handler react-native-screens

二、配置文件

  • 为了完成 react-native-screens 在 Android 上的安装, 请在android/app/build.gradle 中 dependencies 选项中添加下面这两行:

    1. implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
    2. implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

    image.png

  • 为了完成 react-native-gesture-handler 在 Android 上的安装,请在 MainActivity.java 中做如下修改: ```javascript import com.facebook.react.ReactActivityDelegate; import com.facebook.react.ReactRootView; import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

@Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected ReactRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.this); } }; }

  1. ![image.png](https://cdn.nlark.com/yuque/0/2019/png/402644/1577756094255-d945302f-b144-4a26-bd65-5c971d0c3dc1.png#align=left&display=inline&height=328&name=image.png&originHeight=656&originWidth=1304&size=145621&status=done&style=none&width=652)
  3. - 在入口文件index.js中配置
  4. ```javascript
  5. import 'react-native-gesture-handler'

image.png

三、拆分路由

3-1 routers文件夹下

  1. //index.js
  2. import { createAppContainer } from 'react-navigation';
  3. import { createStackNavigator } from 'react-navigation-stack';
  4. import HomePage from '../views/HomePage';
  6. const AppNavigator = createStackNavigator(
  7.     {
  8.       Home: {
  9.         //配置主页组件
  10.         screen: HomePage,
  11.       },
  12.     },
  13.     {
  14.       initialRouteName: "Home"
  15.     }
  16.   );
  18.   export default createAppContainer(AppNavigator);

3-2 views文件夹下

  • 快捷键rnc一键生成 ```javascript //HomePage.js import React, { Component } from ‘react’; import { View, Text } from ‘react-native’;

export default class HomePage extends Component { constructor(props) { super(props); this.state = { }; }

render() { return ( HomePage ); } }

  1. <a name="pzpqJ"></a>
  2. #### 3-3 app.js文件中
  3. ```javascript
  4. import React from 'react';
  5. import Router from './routers'
  6. export default class App extends React.Component {
  7.   render() {
  8.     return <Router/>
  9.   }
  10. }

四、路由跳转

  • 路由页

    1. const AppNavigator = createStackNavigator(
    2.   {
    3.     Home: {
    4.       screen: HomePage,
    5.     },
    6.     Detail:{
    7.       screen:DetailPage
    8.     }
    9.   },
    10.   {
    11.     //路由重定向
    12.     initialRouteName: "Home"
    13.   }
    14. );

  • 主页

    1. //跳转
    2. <View>
    3.     <Text> HomePage </Text>
    4.     <Button
    5.         title="Go to Details"
    6.             onPress={() => this.props.navigation.navigate('Detail')}
    7.     />
    8. </View>

    4-1 跳转传值

  1. 需要将参数包装成一个对象，作为navigation.navigate方法的第二个参数传递给路由。如： this.props.navigation.navigate(‘RouteName’, { / params go here / })
  2. 读取页面组件中的参数的方法：this.props.navigation.state.params。
  • Home页 ```javascript

toggleDetail=()=>{ this.props.navigation.navigate(‘Detail’,{id:”1234”}) }

  2. - Detail页
  3. ```javascript
  4. componentDidMount(){
  5.       //第一种
  6.     console.log(this.props.navigation.state.params)
  7.       //第二种
  8.       console.log(this.props.navigation.getParam("id"))
  9. }

Tip：箭头函数直接跳转到了详情页，没有通过点击事件，需使用bind()

  • Detail页 ```javascript 三、路由 - 图3 {item.name}

handleDetail(id){ this.props.navigation.navigate(‘Detail’,{id:id}) console.log(id) }

  2. <a name="P653A"></a>
  3. ## 五、Welcome页到Home页
  4. ```javascript
  5. import React, { Component } from 'react';
  6. import { View, Image, Dimensions, StyleSheet } from 'react-native';
  7. const { width, height } = Dimensions.get('window');
  9. export default class WelcomePage extends Component {
  10.     constructor(props) {
  11.         super(props);
  12.         this.state = {
  13.         };
  14.     }
  15.     render() {
  16.         return (
  17.             <View>
  18.                 <Image style={styles.image} source={require("../assets/20190923165901_ayfoo.jpg")}></Image>
  19.             </View>
  20.         );
  21.     }
  22.     componentDidMount() {
  23.         this.timer = setTimeout(() => {
  24.             this.props.navigation.navigate('Home')
  25.         }, 3000)
  26.     }
  27.     componentWillUnmount() {
  28.         if (this.timer) {
  29.             clearTimeout(this.timer)
  30.         }
  31.     };
  33. }
  34. const styles = StyleSheet.create({
  35.     image: {
  36.         width: width,
  37.         height: height
  38.     }
  39. })

5-1 路由页

思路：

  • 创建两个栈，一个栈放欢迎页，一个栈放其他页面

    1. import { createAppContainer, createSwitchNavigator } from 'react-navigation';
    2. import { createStackNavigator } from 'react-navigation-stack';
    3. import HomePage from '../views/HomePage';
    4. import DetailPage from '../views/DetailPage';
    5. import WelcomePage from '../views/WelcomePage';
    6. //创建第一个栈(欢迎页)
    7. const InitNavigator = createStackNavigator(
    8. {
    9.   Welcome: {
    10.     screen: WelcomePage,
    11.     navigationOptions: {
    12.       header: null
    13.     }
    14.   }
    15. }
    16. )
    17. //创建其他页面的栈
    18. const AppNavigator = createStackNavigator(
    19. {
    20.   Home: {
    21.     screen: HomePage,
    22.     navigationOptions: {
    23.       headerTitle: '网易云音乐',
    24.       headerLeft: null
    25.     }
    26.   },
    27.   Detail: {
    28.     screen: DetailPage,
    29.     navigationOptions: {
    30.       headerTitle: '详情页',
    31.     }
    32.   },
    33. },
    34. //全局配置
    35. {
    36.   defaultNavigationOptions: {
    37.     headerStyle: {
    38.       backgroundColor: "#c20c0c",
    39.     },
    40.     headerTitleStyle: {
    41.       color: "#fff"
    42.     },
    43.     headerTintColor: "#fff"
    44.   }
    45. }
    46. );
    47. //将两个栈配置在路由
    48. const router = createSwitchNavigator(
    49. {
    50.     Init: InitNavigator,
    51.     App:AppNavigator
    52. },
    53. {
    54.   initialRouteName:"Init",
    56. }
    57. )
    58. export default createAppContainer(router);

    六、底部导航配置

  • 文件视图

image.png

  • 安装依赖

    1. yarn add react-navigation-tabs

  • routers文件夹下新建tabs.js ```javascript import React from ‘react’ import { createBottomTabNavigator } from ‘react-navigation-tabs’; import MusicPage from ‘../views/tabs/MusicPage’; import MvPage from ‘../views/tabs/MvPage’; import Ionicons from ‘react-native-vector-icons/Ionicons’;

const TabNavigator = createBottomTabNavigator( { Music: { screen: MusicPage, navigationOptions: { //底部标签名 tabBarLabel: “音乐” } }, Mv: MvPage }, { //配置底部导航Icon,导入React,Icon图标库 defaultNavigationOptions: ({ navigation }) => ({ tabBarIcon: ({ focused, horizontal, tintColor }) => { const { routeName } = navigation.state; let IconComponent = Ionicons; let iconName; if (routeName === ‘Music’) { iconName = ios-home; } else if (routeName === ‘Mv’) { iconName = ios-options; } return ; }, }), tabBarOptions: { //点击的颜色 activeTintColor: ‘tomato’, //没有点击的颜色 inactiveTintColor: ‘green’, style: { backgroundColor: “blue” }, //标签样式 labelStyle: { fontSize: 18 } }, }, ); export default TabNavigator

  2. - View文件夹下新建Tabs文件夹装载底部导航页
  3. - 将Tabs导入到Home页
  5. ![image.png](https://cdn.nlark.com/yuque/0/2020/png/402644/1577933891495-a1f11d1b-b92e-40d9-8e47-a71959cbd307.png#align=left&display=inline&height=283&name=image.png&originHeight=457&originWidth=824&size=41249&status=done&style=none&width=511)
  7. - HomePage.js页装载Tabs
  8. ```javascript
  9. import React, { Component } from 'react';
  10. import Tabs from '../routers/tabs'
  12. export default class HomePage extends Component {
  13.     render() {
  14.         return <Tabs/>
  15.     }
  16. }
  • 配置顶部导航标题 ```javascript import React from ‘react’ import { createBottomTabNavigator } from ‘react-navigation-tabs’; import MusicPage from ‘../views/tabs/MusicPage’; import MvPage from ‘../views/tabs/MvPage’; import Ionicons from ‘react-native-vector-icons/Ionicons’;

const TabNavigator = createBottomTabNavigator( { Music: { screen: MusicPage, navigationOptions: { tabBarLabel: “音乐” } }, Mv: MvPage }, { … navigationOptions:({navigation})=>{ const {routeName} = navigation.state.routes[navigation.state.index] if (routeName === ‘Music’) { return { headerTitle:”音乐” } } else if (routeName === ‘Mv’) { return { headerTitle:”Mv” } } } }, ); export default TabNavigator ```