ネイティブスクリーンを最下部で反応させる

Question

iOSシミュレータでXCodeを使用してReactネイティブアプリを初めて作成していますが、画面の下部にある私の要素が途切れているようです画面はこれまでのところスクロールしかできません。私は全体的なコンテナ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 
    } 
});