Javascript 从另一个组件调用navigation.navigate_Javascript_Reactjs_React Native

Javascript 从另一个组件调用navigation.navigate

javascript reactjs react-native

Javascript 从另一个组件调用navigation.navigate,javascript,reactjs,react-native,Javascript,Reactjs,React Native,今天我花了6个小时想弄明白，这是我最后的选择我想用react navigate切换屏幕。当所有屏幕都在同一个文件中时，它工作。但是，当我将它们分成多个文件（每个屏幕一个文件）时，会出现错误“undefined不是一个对象（计算“\u this.props.navigation.navigate”）我试过很多东西。希望你能帮忙。这是代码 App.js-------------------------------------------------- import 'react-native-g

今天我花了6个小时想弄明白，这是我最后的选择

我想用react navigate切换屏幕。当所有屏幕都在同一个文件中时，它工作。但是，当我将它们分成多个文件（每个屏幕一个文件）时，会出现错误“undefined不是一个对象（计算“\u 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;

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;

导入“反应本机手势处理程序”；
从“博览会状态栏”导入{StatusBar}；
从“React”导入React；
从“react native”导入{样式表、文本、视图、按钮}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
const Stack=createStackNavigator（）
//页数
从“/src/landing”导入着陆屏幕；
从“/src/House”导入房屋；
//代码
功能主屏幕（{navigation}）{
返回(
);
}
功能室内屏幕（{navigation}）{
返回(
);
}
类应用程序扩展了React.Component{
render（）{
返回(
)   
}
}
常量样式={
}
导出默认应用程序；

landing.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;

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;

从“React”导入React；
从“react native”导入{View，Text，ImageBackground，TouchableOpacity，Image}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
//图像
var myBackground=require（“../assets/icons/lightblueBackground.png”）
var buttonbannellower=require（“../assets/icons/buttonbannellower.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”）
//代码
类扩展React.Component{
render（）{
返回(
props.navigation.navigate（'House'）}>
你好
)       
}
}
常量样式={
容器：{
弹性：1，
flexDirection:“列反转”，
背景颜色：“#ACE1EB”
},
图像背景：{
宽度：“100%”，
高度：“100%”，
弹性：1，
对齐项目：“柔性端”，
flexDirection:'行'，
为内容辩护：“中心”，
对齐内容：“中心”，
},
蓝色按钮：{
身高：110，
宽度：110，
},
左侧图标：{
marginRight:20，
marginBottom:10，
身高：40，
宽度：40
},
IConRight：{
marginLeft:20，
marginBottom:10，
身高：40，
宽度：40
},
国际互联网：{
marginLeft:20，
marginBottom:10，
身高：40，
宽度：40
},
}
导出默认着陆；

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

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;

从“/src/landing”导入着陆屏幕；
从“/src/House”导入房屋；
类应用程序扩展了React.Component{
render（）{
返回(
)   
}
}

还要在类组件中使用道具，请使用以下关键字：

this.props.navigation.navigate（'House'）}>

还有一件事，要访问类组件中的道具，您可以这样调用构造函数：

类登录扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
this.props.navigation.navigate（'House'）}>
你好
)       
}
}

您不需要为屏幕组件创建函数。就这样做吧：

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;

你好谢谢你的回复。但遗憾的是，这并不能消除错误。你能试着在你的编译器中添加

constructor（props）{super（props）；}

吗我完全是个初学者。我的成绩是什么？我应该在哪里添加那行代码？在我添加了这个.props.navigation.navigate（'house'）之后，它给了我以下错误：“未定义的不是一个对象（评估''u this.props.navigation.navigate'）。你应该在

类登录后添加它。组件{

我将更新我的答案