时间戳

首页 > 解决方案 > 在 react-native 应用程序中渲染另一个屏幕

javascript - 在 react-native 应用程序中渲染另一个屏幕

问题描述

我在我的 react 本机应用程序的页面之间导航时遇到问题。当我尝试使用该按钮时，我收到以下错误消息： TypeError: undefined is not an object (evalating '_this.props.navigation') 我使用大量 js 文件创建了我的应用程序，并且我喜欢在它们之间导航使用纽扣。我的 App.js 文件从初始化呈现到 WelcomeScreen。

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import RecipesList from "cakeapp/app/screens/RecipesList.js";
import { ImageBackground, StyleSheet, View, Text, Button, navigation } from "react-native";


function WelcomeScreen(props) {
    return (
        <NavigationContainer>
        <ImageBackground
        style={styles.background}
        source={require('cakeapp/app/assets/MainPage.png')}
        >
        <Text style={styles.text}>MyCakeRecipes</Text>
        <View style={styles.homeButton}>
       <Button
        title="Recipes"
        onPress={() => this.props.navigation.navigate('RecipesList')}
        />
        </View>
        </ImageBackground>
        </NavigationContainer>
    );
}

const styles = StyleSheet.create({
    background: {
        flex:1,
        justifyContent: "flex-end",
    },
    text: {
    fontSize: 30,
    fontWeight: "bold",
    color: "white",
    textAlign: "center",
    bottom: 500,
  },
    homeButton: {
        width: '100%',
        height: 40,
        backgroundColor: '#5f7f8a'
    }
})

export default WelcomeScreen;


import React from 'react';
import { Image, ScrollView, View, Text, } from 'react-native';

const imageDis = {
  width: 150,
  height: 150
  //flex:1,
  //justifyContent: "flex-end"

};

const Recipes = () => (
  <ScrollView style={{backgroundColor: '#5f7f8a'}}>
    <Text style={{ fontSize: 20 }}>Chocolate Cake</Text>
    <Image source={require('cakeapp/app/assets/Choc.png')} style={imageDis} />
    <Text style={{ fontSize: 20 }}>Chocolate cupcake</Text>
    <Image source={require('cakeapp/app/assets/ChocCu.png')} style={imageDis} />
    <Text style={{ fontSize: 20 }}>Lemon Cake</Text>
    <Image source={require('cakeapp/app/assets/Lemon.png')} style={imageDis} />
    <Text style={{ fontSize: 20 }}>Lemom meringue</Text>
    <Image source={require('cakeapp/app/assets/LemonM.png')} style={imageDis} />
    <Text style={{ fontSize: 20 }}>Chocolate Berry</Text>
    <Image source={require('cakeapp/app/assets/ChcoBerry.png')} style={imageDis} />
  </ScrollView>
);

export default Recipes

标签： javascriptreactjsreact-native

解决方案

据我所知， < NavigationContainer> 在 app.js 文件中用于定义您要导航到的屏幕。而且您必须将导航作为道具传递给组件。您的 app.js 文件应如下所示

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Welcome"
          component={WelcomeScreen}
        />
        <Stack.Screen 
        name="Recipes" 
        component={RecipesList} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

你的welcomeScreen是这样的：

const WelcomeScreen = ({ navigation }) => {
  return (
    <Button
      title="RecipesList"
      onPress={() =>
        navigation.navigate('RecipesList')
      }
    />
  );
};

让我知道它是否不起作用

推荐阅读