reagieren nativ - Bildschirm abgeschnitten am unteren Rand

Question

Ich baue eine React Native App zum ersten Mal mit einem iOS-Simulator mit XCode, und es scheint, dass meine Elemente auf der Unterseite des Bildschirms abgeschnitten werden, als ob die Bildschirm kann nur so weit scrollen. Ich habe versucht, den gesamten Container View Höhe zu ändern, aber es ändert sich nicht, wie weit ich scrollen kann. Ich habe auch versucht, das Styling zu entfernen, sowie View zu ScrollView zu ändern, aber keiner half. Eine weitere seltsame Sache ist, dass ich brauche paddingTop hinzufügen, andernfalls wird die erste Text über die Zeit im Simulator

Hier ist der Code angezeigt:

import React from 'react'; 
import { StyleSheet, Text, View } from 'react-native'; 
import Fields from './components/Fields.js' 

export default class App extends React.Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text>Calculator</Text> 
     <Text>1099 Calculator</Text> 
     <Fields /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#fff', 
    alignItems: 'center', 
    paddingTop: 50 
    }, 
}); 

Hier ist die oben auf dem Bildschirm, ohne die Polsterung

Und hier ist, wie es abgeschnitten sieht

Answer 1

Dies ist ein Problem, das ich auch gehabt. Um es zu beheben, wickeln Sie einfach Ihren Container mit einer anderen Ansicht ohne Polsterung aber mit Flex. So ähnlich:

export default class App extends React.Component { 
    render() { 
    return (
     <View style={styles.main}> 
     <View style={styles.container}> 
      <Text>Calculator</Text> 
      <Text>1099 Calculator</Text> 
      <Fields /> 
     </View> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#fff', 
    alignItems: 'center', 
    paddingTop: 50 
    }, 
    main: { 
    flex: 1 
    } 
});