はこれがレイアウトされたと反応し、ネイティブ

Question

でフレックスを使用して下に項目スティックを行います

<View style={styles.container}> 
    <View style={styles.titleWrapper}> 
     ... 
     ... 
    </View> 
    <View style={styles.inputWrapper}> 
     ... 
     ... 
    </View> 

    <View style={styles.footer}> 
     <TouchableOpacity> 
      <View style={styles.nextBtn}> 
       <Text style={styles.nextBtnText}>Next</Text> 
      </View> 
     </TouchableOpacity> 
    </View> 
</View> 

私は、画面の下部に位置するフッターのスタイルを持つビューを作りたいです。私はフッタにalignSelfプロパティを与えようとしましたが、下部に配置するのではなく、画面の右側に配置します。フッター項目を最後までスティックするにはどうすればよいですか？ありがとうございました。

Answer 1

リアクションネイティブでは、デフォルト値flexDirectionはのCSSとは異なり、columnです。

したがって、flexDirection: 'column'では、横軸は水平で、alignSelfは左右に作用します。

フッターを下部にピン止めするには、いくつかのオプションがあります。ここでは1です：

• 絶対位置が同じように、フッターを修正するための別の方法であるコンテナ

Answer 2

にjustifyContent: 'space-between'を適用します。私は、次のアプローチを使用することになり

footer: { 
    position: 'absolute', 
    height: 40, 
    left: 0, 
    top: WINDOW_HEIGHT - 40, 
    width: WINDOW_WIDTH, 
} 

Answer 3

：

<View style={styles.container}> 

    <View style={styles.contentContainer}> {/* <- Add this */} 

     <View style={styles.titleWrapper}> 
      ... 
     </View> 
     <View style={styles.inputWrapper}> 
      ... 
     </View> 

    </View> 

    <View style={styles.footer}> 
     ... 
    </View> 
</View> 

var styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     backgroundColor: '#F5FCFF', 
    }, 
    titleWrapper: { 

    }, 
    inputWrapper: { 

    }, 
    contentContainer: { 
     flex: 1 // pushes the footer to the end of the screen 
    }, 
    footer: { 
     height: 100 
    } 
}); 

この方法では、titleWrapperとinputWrapperのスタイルは、アプリケーションのレイアウトを破ることなく更新でき、コンポーネント自体は再利用しやすくなります:)