react native基於react-navigation 4.x點擊組件，實現stack式跳轉

1. 先描述一下我的文件結構

app.js
    home.js
　        newcourse.js
　　　　　　introduce.js

    accompany.js
    mycourse.js
    mine.js
// 第一層是一個 tabBar，這個路由包含的組件，就是home、accompany、mycourse、mine，第一層渲染頁面，是home組件，如下圖

 

 

這塊的代碼，我不好粘過來，tabBar如果你不會寫，就看我寫的這篇博客，很清晰  https://www.cnblogs.com/tengyuxin/p/11730352.html

 2. 我的需求： 點擊藍色方塊區域（newcourse.js組件），跳轉到 “介紹頁面”（introduce.js）
上一下圖 和 代碼

 

 

 

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

let {width} =  Dimensions.get('window');



class NewCourse extends React.Component{
    render(){
        return (
            <View>
            <TouchableWithoutFeedback
                onPress={()=>{this.props.navigation.navigate('Introd')}}
            >
            <View>
                <Text style={{backgroundColor:'blue',width: 300,height: 300}}>你好，世界</Text>
            </View>
            </TouchableWithoutFeedback>
            </View>           
        )
    }
}

export default withNavigation(NewCourse);

重點來了：
（1）在 newcourse頁面，導出組件使用  withNavigation ，簡單來說就是可以讓這個子組件可以使用navigation，使用路由表，不然沒有navigation屬性
詳細介紹withNavigation地址 https://reactnavigation.org/docs/en/with-navigation.html 
（2）home組件，里必須建立路由表 ，為了，newcourse里面 `this.props.navigation.navigate('Introd')` 可以跳轉,我還是粘貼一下代碼

import React, { Component } from 'react';
import { View,Text,StyleSheet,ScrollView,Dimensions } from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

let screenH = Dimensions.get('window').height;
// （4）導入“新品課程”組件
import NewCourse from './NewCourse.js' 

class HomeScreen extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <View>
                <ScrollView                 
                     contentContainerStyle={styles.contentContainer}
                     showsVerticalScrollIndicator={false}             
                >
                    <View style={styles.containPosition}>                      
                        <Text style={styles.newCourse}>新品課程</Text>                         
                        <NewCourse />                     
                    </View>                  
                </ScrollView>                               
            </View>
        )
    }
}
// 建立路由表
import InrtroduceScreen from './IntroduceCourse';
const stackNavigator = createStackNavigator(
    {
        Home: HomeScreen,
        Introd: InrtroduceScreen
    }
);
//注意導出： 當然首頁會有一個“空白的導航區域”，想辦法弄掉吧
const One = createAppContainer(stackNavigator);
export default One;

let styles = StyleSheet.create({
    contentContainer: {
        paddingHorizontal: 20
    },
    containPosition:{
      flex: 0,
      flexDirection: 'column',
      alignItems: 'center',
    },
    newCourse:{
        width: '100%',
        fontSize: 20,
        marginTop: 26,
        marginBottom: 23,
        letterSpacing: 4,       
    },    
  });

 

邏輯上就這樣了，這兩篇博客一塊看，才能看懂
https://www.cnblogs.com/tengyuxin/p/11730352.html 

如果有用，點個贊吧，謝謝

=》不好意思，這個目前，有些問題，比如跳不出“TabBar”，應該是路由級別上出現問題，后面我會改正

需要將  introduce 組件放進 ， TabBar 同一級路由即可，實現跳出