Recat本机/获得屏幕“组件”支柱的无效值

Question

我是韩国人。我也不擅长英语。请理解这件事。

我想，如果我按下按钮，就移动页面。

但

获得了屏幕的“组件”支柱的无效值

此错误保持在StyleScreen中。

我是明确的初学者，所以如果你上传完整的代码，我非常感谢。

这是我的App.js代码：

import * as React from 'react';
import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import MainScreen from './MainScreen';
import DetailScreen from './DetailScreen';
import StyleScreen from './StyleScreen';

const Stack = createStackNavigator();

const App = () => {

  const [overlay, setOverlay] = useState(false);
  const toggleOverlay = () => {
    setOverlay(!overlay);
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="MAIN">
        <Stack.Screen name="MAIN" component={MainScreen}
          options={{
            title: '예산'
        }}/>
        <Stack.Screen name="DETAIL" component={DetailScreen} 
          options={{
            title: '색'
        }}/>
        <Stack.Screen name="STYLE" component={StyleScreen} 
          options={{
            title: '스타일'
        }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

这是StyleScreen.js：

import React, { Component } from 'react';
import { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, Dimensions, View, ScrollView, Image, navigation } from 'react-native';

let natural = require('./내추럴.png');
let modern = require('./모던.jpg');
let romantic = require('./로맨틱.jpg');
let NEurope = require('./북유럽.png');
let junk = require('./정크4.jpg');
let minimal = require('./미니멀.jpg');


const HomeScreen=({navigation}) => {
  
    return (
      <View style={styles.container}>

      <StatusBar style="block"></StatusBar>

      <View style={styles.ask1}>
        <Text style={styles.askcolor}>선호하는 스타일을</Text>
        <Text style={styles.askcolor}>선택해주세요</Text>
      </View>

      <View style={styles.day2}>
        <View style={styles.day}>
          <Image style={styles.image} source={modern}/>
          <Image style={styles.image2} source={NEurope}/>
        </View>

        <View style={styles.day}>
          <Text style={styles.colorname}>             모던</Text>
          <Text style={styles.colorname}>                              북유럽</Text>
        </View>

        <View style={styles.day}>
          <Image style={styles.image} source={minimal}/>
          <Image style={styles.image2} source={natural}/>
        </View>

        <View style={styles.day}>
          <Text style={styles.colorname}>           미니멀</Text>
          <Text style={styles.colorname}>                             내추럴</Text>
        </View> 

        <View style={styles.day}>
          <Image style={styles.image} source={romantic}/>
          <Image style={styles.image2} source={junk}/>
        </View>

        <View style={styles.day}>
          <Text style={styles.colorname}>           로맨틱</Text>
          <Text style={styles.colorname}>                              정크</Text>
        </View>

      </View>

      <View style={styles.button}>
         <Button onPress={() => navigation.navigate('DETAIL')} title='다음으로'/>
        </View>
        
    </View>

    );
  }


const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:"white"
  },
  ask1:{
    flex:0.3,
    justifyContent:"center",
    marginTop:70,
    marginBottom:40,
  },
  askcolor:{
    fontSize:34,
    fontWeight:"900",
    paddingHorizontal:30,
  },
  image:{
    height: 130, 
    width: 158,
    borderRadius:10,
    backgroundColor:"black"
    },
  image2:{
    height: 130, 
    width: 158 ,
    borderRadius:10,
    marginLeft:28,
    },
  day:{
    flexDirection: 'row',
  },
  day2:{
    flex:3,
    paddingHorizontal:30,
  },
  colorname:{
    fontSize:17,
    fontWeight:"300",
    paddingHorizontal:23,
    paddingVertical:13,
  },
  button:{
    flex:0.43,
    marginLeft:286,
}
})

Answer 1

我认为您还没有导出您的styleScreen组件，这可能是这里的问题，而且您的"StyleScreen“组件被命名为"HomeScreen”，因此我建议正确地重命名并默认导出它。

在StyleScreen组件中，您已经从“react原生”导入了“导航”，我认为这是不正确的。

Answer 2

您没有导出StyleScreen组件。

将其添加到StyleScreen.js的底线中。

export default StyleScreen;

Answer 3

尝试替换代码

const HomeScreen=({navigation}) => {

使用

export default StyleScreen =({navigation}) => {