React Native 屏幕在顶部被截断 Android

Question

我有一个在顶部被截断的输入。是否可以让它直接在黑条下对齐而不用写具体的margins/padding？如果我去掉填充，元素就会从屏幕上完全消失

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>

      );
    }

Link: https://github.com/react-native-community/react-native-safe-area-view

Answer 2

SafeAreaView 在 Android 上不起作用，我通常这样做。

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)",
    }
  });

React Native 屏幕在顶部被截断 Android

React Native screen cut off at top Android

android

reactjs

react-native

react-native-android