Question

我是本机的新React，我对React导航有问题。我不知道如何从首页导航到Screen1。 Home包含来自2个js文件的2个组件。运行应用程序时，我们从2个组件开始，然后从Home上单击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>
    );
}
}

Route.js文件

import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';

import Home from './Home';
import Screen1 from './Screen1';
import Screen2 from './Screen2';

export const HomeStack = createStackNavigator(
{
    Home_Screen: {
        screen: Home,
    },
    Screen_1: {
        screen: Screen1
    },
    Screen_2: {
        screen: Screen2
    }
}
)

文件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>
    );
}
}

文件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/>
    );
  }
}

Answer 1

问题是navigation属性仅在screen组件内部可用，而在screen的子/子组件中不可用。

在您的情况下，this.props.navigation.navigate('Screen_1')将在主屏幕上运行。但不在Component1或Component2内部。如果您想在其中使用navigation道具，则必须将其作为道具发送，

<Component1 navigation={this.props.navigation} />

现在您可以在Component1内部访问navigation道具

希望有帮助。

Answer 2

要添加到@RaviRaj答复中，如果您的屏幕深度嵌套，也可以使用withNavigation wrapper。但是在这种情况下，如果您的屏幕组件只有1或2层深，请通过导航作为道具！

React Native Navigation：在屏幕之间导航（确实需要帮助）

2 个答案: