react native 使用react-navigation 4.x 遇到的所有問題

1. 引入核心包（yarn add react-navigation） 和 相關依賴 （yarn add react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23 ，此處是給原生的React Native項目安裝依賴）

https://reactnavigation.org/docs/zh-Hans/getting-started.html （官方文檔）

沒有運行項目，又引入 react-native-tabs 報了一種錯誤，gradle 6.0不兼容

答： 解決辦法 ， 先運行 核心包和相關依賴的項目 ， 運行成功之后，再安裝 react-navigation-tabs ，就可以了 （為什么這樣，我不知道）

 

2. TabBar的實現，查了很多官方文檔，沒有基礎合適的案例，最后自己拼湊出一種解決放式
答：代碼已經 “粘貼出來了”，同時“圖標”用圖片代替，好方法，比較簡單
https://www.cnblogs.com/tengyuxin/p/11730352.html （這這個就是我寫的博客）

 

3. 實現點擊“某個課程”，進行跳轉（當時沒有較全的思路，只是一步一步的解決眼前出現的問題，最后全部攻克）

步驟1： 給View組件添加點擊事件 --- 官方文檔“處理觸摸事件”，使用Touchable組件  

步驟2： 當時路由跳轉時，局部組建沒有navigation屬性，無法使用父組件的路由表 --- 最后通過“withNavigation”
導出組件時，局部組件就可以使用navigation跳轉了。

步驟3： 沒跳出TabBar組件的邏輯，底部依然有tabBar導航 --- 解決放式是路由擺放的邏輯層次，課程介紹頁面路由，
應該和tabBar路由，同一級別，這樣才能跳出去

步驟4： 當你將“TabBar和課程介紹頁面”放到同一個stack路由時，頁面上方有一處空白的“導航區域” --- 解決辦法，就是
配置navigationOptions，設置headerStyle里面 height:0,

步驟5： 現在，跳轉全部成功，可是頁面過渡動畫，不是從右向左，而是從下往上 --- 解決辦法，transitionConfig

我也是從網上抄來一塊代碼，有用。

那我就上代碼了

 

 

效果圖1 和 效果圖2
       

 

 

        

 

 

 

 

// App.js 

import React from 'react';
import {View,Text} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {createStackNavigator} from 'react-navigation-stack';
import StackViewStyleInterpolator from
        'react-navigation-stack/src/views/StackView/StackViewStyleInterpolator';
// 1.導入 首頁、課程、我的 等三個組件，組件 TabBar路由
import HomeScreen from './Pages/Home';
import CourseScreen from './Pages/Course';
import MineScreen from './Pages/Mine';

const TabNavigator = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Course: CourseScreen,
    Mine: MineScreen
  }
)

// 2.導入 introd介紹頁面，建立Stack路由
import IntroduceScreen from './Pages/Introduce';

const StackNavigator = createStackNavigator(
  {
    TabBar:{  //TabNavigator會主動渲染路由表中第一個 Home路由
      screen:TabNavigator,
      navigationOptions:{ // 配置，讓空白導航欄消失
        headerStyle:{
          height: 0
        }
      }
    }, 
    Introduce: IntroduceScreen
  },
  {
    initialRouteName: 'TabBar',
    transitionConfig:()=>({ // 跳轉時，從右向左，滑入
      screenInterpolator: StackViewStyleInterpolator.forHorizontal
    })
  }
)

// 3. 導出根組件
export default createAppContainer(StackNavigator);

 

 

// Home.js

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

// 導入 HomeSon組件
import HomeSon from './HomeSon';
export default class HomeScreen extends React.Component{
    render(){
        return (
            <View>
               <HomeSon />
            </View>
        )
    }
}

 

// Course.js

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

export default class CourseScreen extends React.Component{
    render(){
        return (
            <View>
                <Text>課程頁面</Text>
            </View>
        )
    }
}

 

 

// Mine.js

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

export default class MineScreen extends React.Component{
    render(){
        return (
            <View>
                <Text>我的頁面</Text>
            </View>
        )
    }
}

 

 

// HomeSon.js

import React from 'react';
import {View,Text,StyleSheet,TouchableWithoutFeedback} from 'react-native';
import {withNavigation} from 'react-navigation';

class MineScreen extends React.Component{
    render(){
        return (
            <View>
                <TouchableWithoutFeedback
                    onPress={()=>this.props.navigation.navigate('Introduce')}
                >
                <View style={styles.btnBox}>
                    <Text>點擊我跳轉到“介紹頁面”</Text>
                </View>
                </TouchableWithoutFeedback>
            </View>
            
        )
    }
}
let styles = StyleSheet.create({
    btnBox:{
        width: 200,height: 100,borderWidth:3,
        flex:0,justifyContent:'center',alignItems:'center'
    }
})
// *** 導出組件，必須用 withNavigation 才行 ,此時它具備了 父組件的路由表
export default withNavigation(MineScreen);

 

 

// introduce.js

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

export default class Introd extends React.Component{
    render(){
        return (
            <View>
                <Text>介紹，😄</Text>
            </View>
        )
    }
}

 

全部代碼，辛苦了，辛苦了，辛苦了