时间戳

首页 > 解决方案 > React Native - flex：1在键盘打开时不适用于ios

react-native - React Native - flex：1在键盘打开时不适用于ios

问题描述

我View的风格flex: 1包含以屏幕为中心的图像和文本框。在 android 中，当文本框聚焦并打开键盘时，视图会缩小。但是，在 ios 中，视图的大小保持不变，键盘覆盖了内容。

export default class App extends React.Component {  render() {
return (
  <View style={styles.container}>
    <TextInput style={styles.box}/>        
  </View>
);  }}
const styles = StyleSheet.create({
     container: {
     flex: 1,
     justifyContent: 'center',
     paddingTop: Constants.statusBarHeight,
     backgroundColor: '#ecf0f1',
     padding: 8,
  },
  box: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor: 'red'
 },
});

如上所述创建示例代码并在小吃中进行测试。在上面的代码中，为 ios 打开键盘时，文本框没有居中。

https://snack.expo.io/H1YO-qzpr

标签： react-native

解决方案

尝试使用<keyboardavoidingview />. 使用这个组件，一旦文本输入被聚焦，屏幕就会自动向上推。检查https://facebook.github.io/react-native/docs/keyboardavoidingview

推荐阅读