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

Question

我按照 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-nativenavigation

Answer 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>and<HomeScCheck>我<Stack.Screen>在 home 上方创建了另一个<Stack.Screen>。虽然这表明第一个<Stack.Screen>将是stack navigator的第一个屏幕。