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>
        )
    }
}

 

全部代码，辛苦了，辛苦了，辛苦了