react-navigation native-stack Stack Navigator 屏幕保持空白答案

【问题标题】：react-navigation native-stack Stack Navigator Screen keep blankreact-navigation native-stack Stack Navigator 屏幕保持空白
【发布时间】：2021-10-20 04:20:59
【问题描述】：

我是按照 React 导航来创建页面的，但是，当我构建应用程序时，我只得到空白页面。

https://reactnavigation.org/docs/hello-react-navigation

React 导航版

"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"@react-navigation/stack": "^6.0.11",

这是我在 App.js 上的完整代码在此页面上，我创建了 3 个函数：HomeSc、HomeScCheck、DetailSc。只有HomeScCheck可以显示在屏幕上。

import * as React from 'react';
import { View, Text , SafeAreaView} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


function HomeScCheck() {
  return (
    <View><Text style={{color:"red"}}>Home Screen Check</Text></View>
  );
}

function HomeSc() {
  return (
    <View><Text>Home Screen</Text></View>
  );
}

function DetailSc() {
  return (
    <View style={{ flex: 1}}>
      <Text style={{color: '#333', fontSize:30}}>Detail Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <SafeAreaView>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeSc} />
          <Stack.Screen name="Detail" component={DetailSc}   options={{ title: 'Overview' }} />
        </Stack.Navigator>
      </NavigationContainer>
      <HomeScCheck/>  
    </SafeAreaView>
  );
}

export default App;

【问题讨论】：

标签： react-native navigation

【解决方案1】：

正如您所说，您希望将HomeScCheck 屏幕作为第一个屏幕，您应该看到应用程序何时运行。

因此，要做到这一点，您的代码应如下所示。

import { View, Text, SafeAreaView } from 'react-native';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScCheck() {
  return (
    <View>
      <Text style={{ color: 'red' }}>Home Screen Check</Text>
    </View>
  );
}

function HomeSc() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

function DetailSc() {
  return (
    <View style={{ flex: 1 }}>
      <Text style={{ color: '#333', fontSize: 30 }}>Detail Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home Check" component={HomeScCheck} />
        <Stack.Screen name="Home" component={HomeSc} />
        <Stack.Screen
          name="Detail"
          component={DetailSc}
          options={{ title: 'Overview' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

所以，我所做的是删除了<safeareaview> 和<HomeScCheck>，并在主页<Stack.Screen> 上方创建了另一个<Stack.Screen>。虽然这表明第一个 <Stack.Screen> 将是 stack navigator 的第一个屏幕。

【讨论】：