反应本机 - 屏幕在底部被切断

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

我也遇到过这个问题。要修复它，只需用另一个没有填充但有弹性的视图包裹你的容器。所以像这样:

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 的填充。可能不是解决办法，干脆弃思路..

反应本机 - 屏幕在底部被切断

react native - screen cut off at bottom

javascript

react-native

react-native-ios