反应原生 - 屏幕在底部切断

Question

我正在使用带有XCode的iOS模拟器首次构建React Native应用程序,似乎屏幕底部的元素被截断,就好像屏幕只能滚动到目前为止.我已经尝试改变整个容器View的高度,但它并没有改变我可以滚动的距离.我也尝试删除样式,以及更改View为ScrollView,但没有帮助.另一个奇怪的是我需要添加paddingTop,否则,第一个Text是在模拟器中显示的时间

这是代码:

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

这是没有填充的屏幕顶部

这就是它看起来如何切断

Answer 1

这是我也遇到的一个问题.要修复它,只需用另一个视图包装容器,不要使用填充,但要使用flex.像这样:

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