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

如果有用，点个赞吧，谢谢

react native基于react-navigation 4.x点击组件，实现stack式跳转

猜你喜欢