react-native學習筆記四====》配置路由（react-navigation4.x）

1. 核心包安裝

yarn add react-navigation

 

2.安裝依賴(前幾個官方推薦，最后一個是我app.js里頭路由需要的模塊)

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context  react-navigation-stack

依賴裝后我的是這樣的：

 

 

3.React Native 0.60 及更高版本

（1）ios：iOS 上完成自動鏈接, 請確保你已經安裝了Cocoapods 然后運行命令:

cd ios

pod install

cd ..

（2）安卓：在android/app/build.gradle 中 dependencies 選項添加：

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

4.在android/app/src/main/java/MainActivity.java中添加（+為新增內容，添加后自行去掉+）：

package com.reactnavigation.example; import com.facebook.react.ReactActivity; + import com.facebook.react.ReactActivityDelegate; + import com.facebook.react.ReactRootView; + import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; public class MainActivity extends ReactActivity { @Override protected String getMainComponentName() { return "Example"; } + @Override + protected ReactActivityDelegate createReactActivityDelegate() { + return new ReactActivityDelegate(this, getMainComponentName()) { + @Override + protected ReactRootView createRootView() { + return new RNGestureHandlerEnabledRootView(MainActivity.this); + } + }; + } }

5.index.js或者 app.js中導入 react-native-gesture-handler依賴
import 'react-native-gesture-handler';

6.4.x版本移除了各類導航器，需要手動安裝，這里安裝一下 StackNavigator和 BottomTabNavigator：
yarn add react-navigation-stack @react-native-community/masked-view react-navigation-tabs

7.app.js中代碼：

import React from 'react';
import { Button,View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

export default createAppContainer(AppNavigator);

8.跑一下代碼：yarn react-native run-react

完美！　　

 

可參考文檔：

1.navigation官網：https://reactnavigation.org/docs/zh-Hans/tab-based-navigation.html

2.eact-naviagtion 的API部分：https://reactnavigation.org/docs/zh-Hans/bottom-tab-navigator.html

3.本文參考：https://www.javascriptcn.com/read-99050.html

 

 

附贈，tab切換功能：

import React from 'react';
import { Text, View ,Image} from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

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

// 下面是 4個組件
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}

class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}

class Xinjia extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>新加坡</Text>
</View>
);
}
}

class Malai extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>馬來西亞</Text>
</View>
);
}
}

const TabNavigator = createBottomTabNavigator(
{
Home:{
screen: HomeScreen,
navigationOptions:({navigation})=>({
tabBarLabel:"中國",
tabBarIcon:({focused,horizontal,tintColor})=>{
let image = focused ? require('./xiong.jpg') : require('./mao.jpg');
return <Image style={{height:40, width:40}} source={image} />
}
})

},
Setting:{
screen: SettingsScreen,
navigationOptions:{
tabBarLabel:"日本",
// 配置Icon圖標有兩種方式，（1）使用圖片，我覺得簡單（2）使用圖標庫
tabBarIcon:({focused,horizontal,tintColor})=>{
let image = focused ? require('./xiong.jpg') : require('./mao.jpg');
return <Image style={{height:40, width:40}} source={image} />
}
}
},
Xin:{
screen: Xinjia,
navigationOptions:{
tabBarLabel:"新加",
// tabBarVisible: false 隱藏標簽欄，就是隱藏tabBar
}
},
Malai:{
screen: Malai,
navigationOptions:{
tabBarLabel:"馬來"
}
}
},
{
tabBarOptions: {
showIcon: true, // 是否顯示選項卡的圖標
activeTintColor: 'tomato', // 選中時狀態顏色
inactiveTintColor: 'gray', // 未選中狀態顏色
labelStyle: { // 選項卡標簽的樣式對象
fontSize: 12,
},
style: { // 選項卡欄的樣式對象
backgroundColor: 'blue',
},
}
}
);

export default createAppContainer(TabNavigator);