React Native屏幕在Android顶部被切断

Question

我的输入在顶部被切断。是否可以将其直接对准黑条，而无需为其书写特定的边距/填充？如果我取下填充物，则该元素将从屏幕上完全消失

import React, { Component } from 'react';
import {View, TextInput, StyleSheet, Dimensions } from 'react-native';

export default function IndoorFOrm() {
  const [value, onChangeText] = React.useState('Useless Placeholder');

  return (
    <View style={styles.container}>
        <TextInput
            style={styles.button}
            onChangeText={text => onChangeText(text)}
            value={value}
        />        
    </View>

  );
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      paddingTop: 35,
      backgroundColor: '#ecf0f1',
    },
    button:{
      borderRadius: 4,
      borderWidth: 2,
      width: 100,
      height: 40,
      borderColor: 'red',
      backgroundColor: "rgb(72, 120, 166)",
    }
  });

Answer 1

使用SafeAreaView

import React, { Component } from 'react';
import {View, TextInput, StyleSheet, Dimensions } from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';

    export default function IndoorFOrm() {
      const [value, onChangeText] = React.useState('Useless Placeholder');

      return (
        <View style={styles.container}>
          <SafeAreaView>
            <TextInput
                style={[styles.button, {paddingTop: insets.top}]}
                onChangeText={text => onChangeText(text)}
                value={value}
            />
          </SafeAreaView>
        </View>

      );
    }

链接：https://github.com/react-native-community/react-native-safe-area-view

Answer 2

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

const styles = new StyleSheet.create({
     screenPadding: {
          paddingTop: Platform.OS === 'android' ? 25 : 0,   
          }
});

Answer 3

StatusBar.currentHeight给出Android中状态栏的高度。

import React, { Component } from 'react';
import {View, TextInput, StyleSheet, Dimensions, StatusBar } from 'react-native';

export default function IndoorFOrm() {
  const [value, onChangeText] = React.useState('Useless Placeholder');

  return (
    <View style={styles.container}>
        <TextInput
            style={styles.button}
            onChangeText={text => onChangeText(text)}
            value={value}
        />        
    </View>

  );
}

const styles = StyleSheet.create({
    container: {
      alignItems: 'center',
      justifyContent: 'center',
      height: StatusBar.currentHeight,
      backgroundColor: '#ecf0f1',
    },
    button:{
      borderRadius: 4,
      borderWidth: 2,
      width: 100,
      height: 40,
      borderColor: 'red',
      backgroundColor: "rgb(72, 120, 166)",
    }
  });