Question

今天我花了6个小时试图弄清楚这一点，这是我的最后选择。

我想用反应导航来切换屏幕。当所有屏幕都在同一文件中时，它可以工作。但是当我将它们分成多个文件（每个屏幕一个文件）时，出现错误“未定义不是对象（评估'_this.props.navigation.navigate'）

我尝试了很多事情。希望能对您有所帮助。这是代码。

App.js ------------------------------------- -------------

import 'react-native-gesture-handler';

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator()

// PAGES

import LandingScreen from './src/landing';
import House from './src/house';

//CODE

function HomeScreen({navigation}) {
    return(
        <LandingScreen navigation={this.props.navigation}/>
    );
}

function HouseScreen({navigation}) {
    return(
        <House navigation={this.props.navigation}/>
    );
}



class App extends React.Component {
    render(){
        return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name="Home" component={HomeScreen}/>
                    <Stack.Screen name="House" component={HouseScreen}/>
                </Stack.Navigator>
            </NavigationContainer>
        )   
    }
    
}

const styles = {

}

export default App;

landing.js ------------------------------------- --------

import React from 'react';
import {View, Text, ImageBackground, TouchableOpacity, Image} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
//IMAGES

var myBackground = require('../assets/icons/lightblueBackground.png')
var buttonbannerlower = require('../assets/icons/buttonbannerlower.png')
var talkbuttonblue = require('../assets/icons/talkbuttonblue.png')
var gearIcon = require('../assets/icons/Gearicon.png')
var playIcon = require('../assets/icons/playicon.png')
var pointerIcon = require('../assets/icons/pointerIcon.png')
var houseIcon = require('../assets/icons/houseIcon.png')

//CODE



class Landing extends React.Component{

    render(){
            return (
                    <View style={styles.container}>
                        <View style={{flex: 0.2, flexDirection: 'row',}}>
                            <ImageBackground source={buttonbannerlower} style={styles.imageBackground}>
                                <TouchableOpacity>
                                    <Image source={gearIcon} style={styles.iconsLeft}/>
                                </TouchableOpacity>
                                <TouchableOpacity>
                                    <Image source={playIcon} style={styles.iconsLeft}/>
                                </TouchableOpacity>
                                <TouchableOpacity>
                                    <Image source={talkbuttonblue} style={styles.blueButton}/>
                                </TouchableOpacity> 
                                <TouchableOpacity>
                                    <Image source={pointerIcon} style={styles.iconPointer}/>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={() => props.navigation.navigate('House')}>
                                    <Image source={houseIcon} style={styles.iconsRight}/>
                                </TouchableOpacity>
                            </ImageBackground>
                        </View>
                        <View style={{backgroundColor: 'green', flex: 0.2, alignItems: 'center',}}>
                            <Text>Hello</Text>
                        </View>
                    </View>
            
            )       
    }
}



const styles = {
    container: {
        flex: 1,
        flexDirection: 'column-reverse',
        backgroundColor: '#ACE1EB'
    },
    imageBackground: {
        width: '100%',
        height: '100%',
        flex: 1,
        alignItems: 'flex-end',
        flexDirection: 'row',
        justifyContent: 'center',
        alignContent: 'center',
    },
    blueButton: {
        height: 110,
        width: 110,
    },
    iconsLeft: {
        marginRight: 20,
        marginBottom: 10,
        height: 40,
        width: 40
    },
    iconsRight: {
        marginLeft: 20,
        marginBottom: 10,
        height: 40,
        width: 40
    },
    iconPointer: {
        marginLeft: 20,
        marginBottom: 10,
        height: 40,
        width: 40
    },
}
export default Landing;

Answer 1

您应该添加如下屏幕组件：

import LandingScreen from './src/landing';
import House from './src/house';

class App extends React.Component {
   
    render(){
        return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name="Home" component={LandingScreen}/>
                    <Stack.Screen name="House" component={House}/>
                </Stack.Navigator>
            </NavigationContainer>
        )   
    }
    
}

还要在类组件中使用道具，请使用以下关键字： <TouchableOpacity onPress={() => this.props.navigation.navigate('House')}>

还有一件事情，要访问类组件中的props，您可以像下面这样调用构造函数：

class Landing extends React.Component{
     constructor(props) {
      super(props);
   }
    render(){
            return (
                    <View style={styles.container}>
                        <View style={{flex: 0.2, flexDirection: 'row',}}>
                            <ImageBackground source={buttonbannerlower} style={styles.imageBackground}>
                                <TouchableOpacity>
                                    <Image source={gearIcon} style={styles.iconsLeft}/>
                                </TouchableOpacity>
                                <TouchableOpacity>
                                    <Image source={playIcon} style={styles.iconsLeft}/>
                                </TouchableOpacity>
                                <TouchableOpacity>
                                    <Image source={talkbuttonblue} style={styles.blueButton}/>
                                </TouchableOpacity> 
                                <TouchableOpacity>
                                    <Image source={pointerIcon} style={styles.iconPointer}/>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={() => this.props.navigation.navigate('House')}>
                                    <Image source={houseIcon} style={styles.iconsRight}/>
                                </TouchableOpacity>
                            </ImageBackground>
                        </View>
                        <View style={{backgroundColor: 'green', flex: 0.2, alignItems: 'center',}}>
                            <Text>Hello</Text>
                        </View>
                    </View>
            
            )       
    }
}

Answer 2

您不需要为屏幕组件创建功能。就是这样：

import 'react-native-gesture-handler';

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator()

// PAGES

import LandingScreen from './src/landing';
import House from './src/house';

//CODE

class App extends React.Component {
    render(){
        return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name="Home" component={LandingScreen}/>
                    <Stack.Screen name="House" component={House}/>
                </Stack.Navigator>
            </NavigationContainer>
        )   
    }
    
}

const styles = {

}

export default App;

然后在屏幕组件中，使用像这样的导航功能导航到其他屏幕。

onPress={() => this.props.navigation.navigate("House")}

从另一个组件调用navigation.navigate

2 个答案: