反应原生 - 屏幕底部切断

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

Answer 2

我遇到了同样的问题，原来是我添加到ScrollView中的填充。也许这不是解决方案，而仅仅是丢弃想法。