リアクションネイティブ - フッターボタン

Question

私はアプリをNative Baseで開発しています。私は以下のような単純なログインフォームを持っています。

ビュー

<Container> 
    <Content> 
     <InputGroup> 
      <Icon name="ios-person" style={{ color: '#969696' }} /> 
      <Input placeholder="Email" autoFocus={ true} style={{ color: '#4b4b4b' }} /> 
     </InputGroup> 
     <InputGroup> 
      <Icon name="ios-unlock" style={{ color: '#969696' }} /> 
      <Input placeholder="Password" secureTextEntry style={{ color: '#4b4b4b' }} /> 
     </InputGroup> 
     <Button style={ styles.loginButton}> 
      Login 
     </Button> 
    </Content> 
</Container> 

スタイル

const styles = StyleSheet.create({ 
    loginButton: { 
    alignSelf : 'stretch', 
    position: 'absolute', 
    bottom:0, 
    left:0, 
    backgroundColor : '#4990e2', 
    borderRadius : 0 
    } 
}); 

出力

ログインボタンを画面の下部に完全に引き伸ばすにはどうすればよいですか？

PS：私は初心者です。

Answer 1

Content要素の高さは、その子要素から計算されます。あなたのケースでは、2つのInputGroup要素を含むのに十分な高さが得られます。これは、ボタンが「絶対」位置にあるためです。最初に画面全体の要素を見つける必要があります。それがContainer要素だとしましょう。次に、Contentの「絶対」測位も使用してください。 position: "absolute", top: 0, bottom: 0, left: 0, right: 0,

このようにして画面全体をカバーします。次に、あなたのボタン要素に： position: "absolute", bottom: 0, left: 0, right: 0

私はalignSelf絶対的な位置付けのために働くとは思わない。