javascript - react 原生 - 屏幕底部被切断

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

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

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