画面をトウ部分にどのように分割して反応ネイティブですか？

Question

は私が反応し、ネイティブに新たなんだ、と私は一部を牽引するために画面を分割しようとしている、最初の部分は、ヘッダやナビゲーションバーの願いは第二部は、本体またはの内容である40ピクセルについての具体的な高さを有していますアプリは、彼の身長が電話画面上の利用可能な高さでなければならないことを望む、私はフレックスボックスの方法を使用しようとしたが、それは動作していない！

<View style={styles.mainContainer}> 
    <View style={styles.navBar}> 
    </View> 
    <View style={styles.body}> 
    </View> 
</View> 

スタイル：

mainContainer: { 
    height: '100%', 
    display: 'flex', 
    flexDirection: 'column', 
}, 
navBar: { 
    display: 'flex', 
    flexDirection: 'row-reverse', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    backgroundColor: '#f1f1f1', 
    height: 30, 
}, 
body: { 
    flex: 3, 
    display: 'flex', 
}, 

Answer 1

あなたのコードが完全に正常に動作します私のコードです 。 https://snack.expo.io/S1LHFmFyG

それはあなたが割合をサポートしていないネイティブに反応の古いバージョンを使用している可能性があります：それはでスナックで実行されている参照してください。彼らはlanded early this yearますので、それらを使用するために、RN v0.42.3以降が必要です。サイドノートでは

^{、コードのいくつかの不要な行は、あなたがそれをよりDRYしたいと思います場合があります。 displayを既定ではflexと宣言する必要はありません。flexDirectionもデフォルトでcolumnに設定されています。また、40pxのストライプが必要な場合はheightが40である必要があります。}

Answer 2

はちょうどこの方法を使用し、私はこれが働くことを願っています。

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF'}}> 
    <View style={{flex:1, backgroundColor:"green"}}> 
    <Text>hello world 1.........</Text> 
    <Text>hello world 1.........</Text> 
    <Text>hello world 1.........</Text> 
    <Text>hello world 1.........</Text> 
    </View> 
     <View style={{flex:1, backgroundColor:"yellow"}}> 
    <Text>hello world 2.........</Text> 
    <Text>hello world 2.........</Text> 
    <Text>hello world 2.........</Text> 
    <Text>hello world 2.........</Text> 
    </View> 
    </View>