二、 React Navigation 5.0.7

目录
一、React Navigation官网
二、安装依赖
三、createStackNavigator
四、createBottomTabNavigator
五、react-native-vector-icons
六、导航页面跳转传参
七、运行结果

一、React Navigation官网

React Navigation的诞生，源于React Native社区对基于Javascript的可扩展且使用简单的导航解决方案的需求。在React Native开发中目前是最受欢迎的,里面内置了App开发常用的导航器：普通导航、顶部导航、底部导航、抽屉导航。这里主要介绍普通导航和底部导航的使用。

ReactNavigation官网.png

二、安装依赖

npm install @react-navigation/native
npm install @react-navigation/stack
npm install @react-navigation/bottom-tabs
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

iOS需要配置：

cd iOS
pod install
cd ..

安卓需要配置：
要完成react-native-screensAndroid的安装，请将以下两行添加到android/app/build.gradle中的 dependencies下：

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

三、createStackNavigator

const HomeStack = createStackNavigator();
function HomeStackScreen() {
  return (
    <HomeStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
      // headerBackImage:require("../images/icon/logo.png"),
      headerBackTitleVisible:false,                          
    }}
    >
      <HomeStack.Screen name="HomeView" component={HomeView}  options={{ title: '星星编程' }}/>
      <HomeStack.Screen name="HomeDetail" component={HomeDetail} options={{ title: '详情' }}/>
    </HomeStack.Navigator>
  );
}

const ServiceStack = createStackNavigator();
function ServiceStackScreen() {
  return (
    <ServiceStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
    >
      <ServiceStack.Screen name="ServiceView" component={ServiceView} options={{ title: '服务' }}/>
    </ServiceStack.Navigator>
  );
}


const NoticeStack = createStackNavigator();
function NoticeStackScreen() {
  return (
    <NoticeStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
    >
      <NoticeStack.Screen name="NoticeView" component={NoticeView} options={{ title: '通知' }}/>
    </NoticeStack.Navigator>
  );
}

const MineStack = createStackNavigator();
function MineStackScreen() {
  return (
    <MineStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
    >
      <MineStack.Screen name="MineView" component={MineView} options={{ title: '我的' }}/>
    </MineStack.Navigator>
  );
}
 

四、createBottomTabNavigator

const Tab = createBottomTabNavigator();
const App: () => React$Node = () => {
  console.disableYellowBox = true;
  return (
    <>
    <StatusBar backgroundColor="blue" barStyle="light-content" />
       <NavigationContainer>
       <Tab.Navigator
       screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName='';
          if (route.name === 'Home') {
            iconName = focused  ? 'ios-home' : 'ios-home';
          }else if (route.name === 'Service') {
            iconName = focused ? 'ios-heart' : 'ios-heart';
          }else if (route.name === 'Notice') {
            iconName = focused ? 'ios-notifications' : 'ios-notifications';
          }else if (route.name === 'Mine') {
            iconName = focused ? 'md-person' : 'md-person';
          }
          return <Ionicons name={iconName} size={size} color={color} />;
        },
      })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
       >
        <Tab.Screen name="Home" component={HomeStackScreen} options={{ title: '首页' }}/>
        <Tab.Screen name="Service" component={ServiceStackScreen} options={{ title: '服务' }}/>
        <Tab.Screen name="Notice" component={NoticeStackScreen} options={{ title: '通知' }}/>
        <Tab.Screen name="Mine" component={MineStackScreen} options={{ title: '我的' }}/>
       </Tab.Navigator>
       </NavigationContainer>  
       </>
  );
};

五、react-native-vector-icons

移动端原生应用一般使用png格式图片，对RN来说使用png格式图片比较复杂，ios和安卓需要适配各种机型的屏幕， UI设计师制作各种尺寸的图片，应用包也会变大。

安装依赖：

npm install react-native-vector-icons --save
react-native link react-native-vector-icons

官方网站：

react-native-vector-icons.png

使用方法：

import Ionicons from 'react-native-vector-icons/Ionicons';

<Ionicons
     name={'md-person'}
     size={30}
     color={tintColor}
 />

六、导航页面跳转传参

1、无参数跳转：

从HomeView页面跳转到HomeDetail页面：

this.props.navigation.navigate('HomeDetail')

从HomeDetail返回到HomeView页面：

this.props.navigation.goBack()

2、带参数跳转，正向传参和反向传参一样，所以这里只列举正向传参：

从HomeView页面跳转到HomeDetail页面，参数detail:'888'：

this.props.navigation.navigate('HomeView',{detail:'888'} )

接收detail参数并从HomeDetail返回到HomeView页面：

this.props.route.params.detail
this.props.navigation.goBack()

七、运行结果

运行结果.png 关注公众号，查看更多内容.jpg