为什么在主组件之前不显示文本输入？

Question

应用程序.tsx

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  TextInput,
  View,
} from 'react-native';
import Main from './screens/Main';

function App(): JSX.Element {
  return (
    <SafeAreaView>
      <StatusBar />
      <View style={{flex: 1}}>
        <TextInput
          style={{
            height: 20,
            width: 300,
            borderWidth: 1,
            borderColor: '#fff',
            zIndex: 5,
          }}
        />
      </View>
      <Main />
    </SafeAreaView>
  );
}


export default App;

主要.tsx

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

import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';
import Home from './Home';
import Movie from './Movie';
import {movies} from '..';

export type screenOptions = {
  Home: {height: number; width: number};
  Movie: {name?: string; similarMovies: movies[]};
};

const Stack = createNativeStackNavigator<screenOptions>();

const Main = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          options={{
            headerShown: false,
            contentStyle: {backgroundColor: '#021'},
          }}
          name="Home"
          component={Home}
        />
        <Stack.Screen
          options={{
            headerShown: false,
            contentStyle: {backgroundColor: '#001'},
          }}
          name="Movie"
          component={Movie}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Main;

const styles = StyleSheet.create({});

正如你所看到的，我现在已经为你提供了代码，告诉我为什么它不显示文本输入，即使我提供了宽度和高度，并且还将视图屏幕设置为 flex:1 。我需要指定视图的高度吗有什么事请。 {属性“类似电影”在“只读”类型上不存在}忽略这一点，因为我已经在这里提供了它，这样我就可以摆脱你的帖子主要是代码

Answer 1

SafeAreView 的默认样式未定义，因此添加 flex:1 以便安全区域占据整个屏幕区域

例如：

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  TextInput,
  View,
} from 'react-native';
import Main from './screens/Main';

function App(): JSX.Element {
  return (
    <SafeAreaView style={{flex:1}}>
      <StatusBar />
        <TextInput
          style={{
            height: 20,
            width: 300,
            borderWidth: 1,
            borderColor: '#fff',
            zIndex: 5,
          }}
        />
      <Main />
    </SafeAreaView>
  );
}