리액트 네이티브(React Native) 안드로이드 키보드(Keyboard)에 따른 화면 변경

 

리액트 네이티브를 사용하여 android UI를 만들때 TextInput을 선택하면 키보드가 올라온다.

 

이에 맞춰서 하단에 텍스트 또는 버튼을 올라오게 하려면 밑에 영역을 flex:1로 지정해두고 flexDirection을 flex-end로 지정하면 된다.

 

 

<View style={{ flex: 1 }}>

<TextInput style={{

width: '100%',

height: verticalScale(50),

backgroundColor: #6200ee,

}}/>

<View style={{

    flex: 1,

justifyContent: "flex-end",

alignItems: 'center',

}}>

<Text>{'ABC'}</Text>

</View>

</View>

 

 

자막

  

자막

 

 

기본적으로 안드로이드에 android:windowSoftInputMode="adjustResize" 옵션으로 지정되어 있기 때문인데 Keyboard에 영향을 받지 않으려면

adjustResize 대신 adjustPan 옵션을 적용해야 한다.

 

StatusBar를 숨기면 [ StatusBar.setHidden(true); ] 위 현상이 적용되지 않으니 주의하자.