目錄

一、React Navigation官網

二、安裝依賴

三、createStackNavigator

四、createBottomTabNavigator

五、react-native-vector-icons

六、導航頁面跳轉傳參

七、運行結果

一、React Navigation官網

React Navigation的誕生，源於React Native社區對基於Javascript的可擴展且使用簡單的導航解決方案的需求。在React Native開發中目前是最受歡迎的,裡面內置了App開發常用的導航器：普通導航、頂部導航、底部導航、抽屜導航。這裡主要介紹普通導航和底部導航的使用。

二、安裝依賴

<code>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
/<code>

iOS需要配置：

<code>cd iOS
pod install
cd ..
/<code>

安卓需要配置：要完成react-native-screensAndroid的安裝，請將以下兩行添加到android/app/build.gradle中的 dependencies下：

<code>implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
/<code>

三、createStackNavigator

<code>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>
      <homestack.screen>
    /<homestack.navigator> 

  );
}

const ServiceStack = createStackNavigator();
function ServiceStackScreen() {
  return (
    <servicestack.navigator>    screenOptions={{
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
    >
      <servicestack.screen>
    /<servicestack.navigator>
  );
}


const NoticeStack = createStackNavigator();
function NoticeStackScreen() {
  return (
    <noticestack.navigator>    screenOptions={{
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
    >
      <noticestack.screen>
    /<noticestack.navigator>
  );
}

const MineStack = createStackNavigator();
function MineStackScreen() {
  return (
    <minestack.navigator>    screenOptions={{
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold', 

      },
    }}
    >
      <minestack.screen>
    /<minestack.navigator>
  );
}
 
/<code>

四、createBottomTabNavigator

<code>const Tab = createBottomTabNavigator();
const App: () => React$Node = () => {
  console.disableYellowBox = true;
  return (
    <>
    <statusbar>
       <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>;
        },
      })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
       >
        <tab.screen>
        <tab.screen>
        <tab.screen>
        <tab.screen>
       /<tab.navigator>
       /<navigationcontainer>  
       >
  );
};
/<code>

五、react-native-vector-icons

移動端原生應用一般使用png格式圖片，對RN來說使用png格式圖片比較複雜，ios和安卓需要適配各種機型的屏幕， UI設計師製作各種尺寸的圖片，應用包也會變大。

安裝依賴：

<code>npm install react-native-vector-icons --save
react-native link react-native-vector-icons
/<code>

官方網站：

使用方法：

<code>import Ionicons from 'react-native-vector-icons/Ionicons';

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

六、導航頁面跳轉傳參

1、無參數跳轉：

從HomeView頁面跳轉到HomeDetail頁面：

<code>this.props.navigation.navigate('HomeDetail')
/<code>

從HomeDetail返回到HomeView頁面：

<code>this.props.navigation.goBack()
/<code>

2、帶參數跳轉，正向傳參和反向傳參一樣，所以這裡只列舉正向傳參：

從HomeView頁面跳轉到HomeDetail頁面，參數detail:'888'：

<code>this.props.navigation.navigate('HomeView',{detail:'888'} )
/<code>

接收detail參數並從HomeDetail返回到HomeView頁面：

<code>this.props.route.params.detail
this.props.navigation.goBack()
/<code> 

七、運行結果

閱讀更多 星星編程 的文章

關鍵字: iOS JavaScript Android