Question

就像我在标题中所说的，我试图在 React Navigation 中显示一个带有 .Screen 的组件，但由于某种原因它没有这样做

index.js

import React from 'react'
import { StyleSheet , View, Text } from 'react-native'
import 'react-native-gesture-handler'
import { StatusBar } from 'expo-status-bar'

import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

import Home from './source/fragments/Home'

export default function App() {
  const AuthStack = createStackNavigator()
  return (
    <View style = { styles.container }>
      <StatusBar style = "auto" />
      <NavigationContainer>
        <AuthStack.Navigator initialRouteName = "Home">
          <AuthStack.Screen 
            name = "Home"
            component = {Home} 
          />
        </AuthStack.Navigator>
      </NavigationContainer>
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffff',
    alignItems: 'center'
  }
})

Home.js

import React, { Component } from 'react'
import { View, Text } from 'react-native'

export default class Home extends Component {
    render() {
        return (
            <View>
                <Text> Home screen </Text>
            </View>
        )
    }
}

感谢您向下滚动这里

Answer 1

以下答案都不是我的解决方案我通过删除 <View>

中的 index.js 组件来修复它

就像下面的代码： index.js

export default function App() {
  const Stack = createStackNavigator()
  return (
    <NavigationContainer>
      <StatusBar style = "auto"/>
      <Stack.Navigator initialRouteName = "Home">
        <Stack.Screen 
          name = "Home"
          component = {Home}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

反应导航 - 组件不显示在屏幕上

1 个答案: