React native 反应本机导航：在屏幕之间导航（确实需要帮助）

我是新来的react本地人，在react导航方面有问题。我不知道如何从家里导航到屏幕1。Home包含来自2个js文件的2个组件。 运行应用程序时，我们从家里开始使用2个组件，从家里单击TouchableOpacity，然后导航到Screen1，但下面的代码无法使用

文件Home.js

import React, { Component } from 'react';
import { View } from 'react-native';
import Component1 from './Component1';
import Component2 from './Component2';

export default class Home extends Component {
render() {
    return (
        <View style={{flex: 1,justifyContent:'center', alignItems:'center'}}>
            <Component1 />
            <Component2 />
        </View>
    );
}
}

文件Component1.js

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

export default class Component1 extends Component {
render() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <TouchableOpacity style={{ backgroundColor: 'blue' }}
               onPress={() => {this.props.navigation.navigate('Screen_1')}}> // it's not working
                <Text style={{ color: '#fff', padding: 10, fontSize: 15 }}>Go to Screen 1</Text>
            </TouchableOpacity>
        </View>
    );
}
}

import React，{Component}来自'React'；
从“react native”导入{View，Text，TouchableOpacity}；
导出默认类Component1扩展组件{
render（）{
返回(
{this.props.navigation.navigate（'Screen_1'）}>//它不工作
转到屏幕1
);
}
}

文件App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { HomeStack } from './Test/Route';


export default class App extends Component{
  render() {
    return (
      <HomeStack/>
    );
  }
}

import React，{Component}来自'React'；
从“react native”导入{平台、样式表、文本、视图}；
从“./Test/Route”导入{HomeStack}；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}

问题是

导航

道具仅在

屏幕

组件中可用，而不是

屏幕

的子/子组件

在您的情况下，

这个.props.navigation.navigate（'Screen_1'）

将在主屏幕上工作。但不在

组件1

或

组件2

内。如果您想在它们内部使用

导航

道具，则必须将其作为道具发送

现在，您可以访问组件1内部的

导航
道具

希望有帮助。
问题在于
导航
道具仅在
屏幕
组件中可用，而不是
屏幕
的子/子组件

在您的情况下，
这个.props.navigation.navigate（'Screen_1'）
将在主屏幕上工作。但不在
组件1
或
组件2
内。如果您想在它们内部使用
导航
道具，则必须将其作为道具发送


现在，您可以访问组件1内部的
导航
道具

希望有帮助。
要添加到@RaviRaj answered，如果您的屏幕嵌套很深，也可以使用。但在这种情况下，如果你的屏幕组件只有1或2层深，请将导航作为道具传递
 若要添加到@RaviRaj Answeed，您还可以在屏幕嵌套较深的情况下使用。但在这种情况下，如果你的屏幕组件只有1或2层深，请将导航作为道具传递
 谢谢你的建议。我想问一下，谢谢你的建议。我也想问一下
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { HomeStack } from './Test/Route';


export default class App extends Component{
  render() {
    return (
      <HomeStack/>
    );
  }
}