React Native - Footer button

Question

Native Base으로 내 React Native 앱을 개발 중입니다. 다음과 같이 간단한 로그인 양식이 있습니다.

보기

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

출력

화면 하단에 로그인 버튼이 완전히 늘어나게하려면 어떻게해야합니까?

추 신 : 초심자입니다.

Answer 1

높이는 Content 요소의 하위 요소에서 계산됩니다. 귀하의 경우에는 단추가 "절대"위치에 있기 때문에 두 개의 InputGroup 요소를 포함하기에 충분한 높이가됩니다. 먼저 전체 화면 요소를 찾아야합니다. 이 요소가 Container 요소라고 가정 해 보겠습니다. 그런 다음 Content에서 "절대"위치 지정을 사용하십시오. position: "absolute", top: 0, bottom: 0, left: 0, right: 0,

이렇게하면 전체 화면을 덮을 수 있습니다. 그런 다음 버튼 요소에 : position: "absolute", bottom: 0, left: 0, right: 0

나는 절대 위치 지정을 위해 작동하지 않는다고 생각합니다.