为什么我的 React-Native 组件不渲染？

Question

所以就我自己而言，我已经完成了大量的 React 工作，但就 React Native 而言，我的经验很少。我正在尝试创建一个使用 React Navigation 跳转到页面的应用程序。它对我来说也是新的，但我读到它对本机应用程序很有用。

这是堆栈导航器设置。每个组件只是一个简单的函数，在视图标签内的文本标签中返回它的名称。

return (
  <View>
    <Text>Component</Text>
  </View>
)

这是带有堆栈导航器的App.js

import 'react-native-gesture-handler';
import React from 'react';
import { ScrollView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Main from './src/components/main';
import Nav from './src/components/nav';
import Home from './src/pages/home';
import Group from './src/pages/group.js';
import Profile from './src/pages/profile';
import Calendar from './src/pages/calendar';
import Event from './src/pages/event';
import CreateEvent from './src/pages/create-event';
import CreateGroup from './src/pages/create-group';
import JoinGroup from './src/pages/join-group';

const Stack = createStackNavigator();

export default function App() {
  return (
    <ScrollView style={{ flex: 1 }}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Group" component={Group} />
          <Stack.Screen name="Profile" component={Profile} />
          <Stack.Screen name="Calendar" component={Calendar} />
          <Stack.Screen name="Event" component={Event} />
          <Stack.Screen name="Create Event" component={CreateEvent} />
          <Stack.Screen name="Create Group" component={CreateGroup} />
          <Stack.Screen name="Join Group" component={JoinGroup} />
        </Stack.Navigator>
      </NavigationContainer>
    </ScrollView>
  )
}

默认是首页，这就是我想要的。但是，我尝试实现一个按钮，按下该按钮将导航到另一个页面 ('group')。按钮不显示。如果我实现文本标签，则不会显示任何文本。该组件肯定已正确导入，因为显示的控制台日志确实打印到控制台。

import React from 'react';
export default function Home(props) {
  return (
    <View style={{ flex: 1 }}>
      <Button style={{flex: 1, width: 200, height: 200, backgroundColor: 'black'}} title="Group" onPress={() => props.navigation.navigate('Group')}/>
    </View>
  )
}

这是应用加载后主页的样子。 Home Page

我已尝试深入研究它。我发现有多个消息来源说尝试使用 { flex: 1 } 进行样式设置，但这并没有解决问题。我试过将文件名和组件大写，没有改变。

Answer 1

NavigationContainer 不应该在 ScrollView 内部，您应该将 scrollview 放在页面组件中，例如主页、配置文件日历

export default function App() {
  return (

      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Group" component={Group} />
          <Stack.Screen name="Profile" component={Profile} />
          <Stack.Screen name="Calendar" component={Calendar} />
          <Stack.Screen name="Event" component={Event} />
          <Stack.Screen name="Create Event" component={CreateEvent} />
          <Stack.Screen name="Create Group" component={CreateGroup} />
          <Stack.Screen name="Join Group" component={JoinGroup} />
        </Stack.Navigator>
      </NavigationContainer>
  )
}

和主页组件

import React from 'react';
export default function Home(props) {
  return (
<ScrollView style={{flex:1}}>
    <View style={{ flex: 1 }}>
      <Button style={{flex: 1, width: 200, height: 200, backgroundColor: 'black'}} title="Group" onPress={() => props.navigation.navigate('Group')}/>
    </View>
</ScrollView>
  )
}

为什么我的 React-Native 组件不渲染？

Why is my React-Native component not rendering?

reactjs

react-native

react-navigation