键盘弹出窗口上的扩展屏幕反应原生？答案

【问题标题】：Extend screen on keyboard pop-up react native?键盘弹出窗口上的扩展屏幕反应原生？
【发布时间】：2020-01-03 18:44:59
【问题描述】：

我的 react-native 应用有问题。在页面底部，有文本框。单击某个文本框后，键盘弹出，所以我看不到文本框。打开键盘时有什么方法可以扩展屏幕高度，这样我就可以正常看到我的文本框了？有问题的图片：
Picture without opened keyboard
Picture with keyboard opened

这是我的代码：

render() {
    return (
        <View style={styles.container}>
            <View style={styles.container1}>
                <Text style={styles.headerText}>Pivoznalac</Text>
                <Text style={styles.infoText2}>Dobrodošli u Jelenov kviz</Text>
                <View style={styles.container12}>
                    {/* <View style={styles.sociaContainer}> */}
                    <View style={styles.container12}>
                        <TouchableOpacity style={styles.socialIcon}
                            onPress={() => Linking.openURL('https://www.facebook.com/JelenPivoBiH/?brand_redir=28032575448')}>
                            <Icon name="facebook" size={50} color="#fff" />
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.socialIcon}
                            onPress={() => Linking.openURL('https://www.instagram.com/jelenpivo/')}>
                            <Icon name="instagram" size={50} color="#fff" />
                        </TouchableOpacity>
                    </View>
                    <Image style={styles.headerImage} source={require('../assets/images/Picture-app2.png')} />
                </View>
            </View>
             <View style={styles.container2}>
                 <Text style={styles.infoHeading}>
                    Upiši podatke i započni igru
                  </Text>
                  <Text style={styles.infoText}
                   onPress={this.toggleButtonStyle}>
                    Upišite korisničko ime ili se registrujte da bi ga dobili.
                  </Text>
                  <TextInput style={styles.inputBox}
                    onChangeText={text => this.onChangeUserToken(text)} 
                    placeholder='Unesite korisnički token'
                    placeholderTextColor = "#ccc"
                  />
                  <TextInput style={styles.inputBox}
                    onChangeText={text => this.onChangeGameToken(text)} 
                    placeholder='Unesite token za igru'
                    placeholderTextColor = "#ccc"
                  />
                  <TouchableHighlight style={styles.button}
                            onPress={this._proceedAsync}
                            underlayColor='#FEC424'>
                        <Text style={styles.buttonText}>
                            Započni igru
                        </Text>    
                  </TouchableHighlight>

              </View>
        </View>
      );
  }

和风格：

//ProceedScreen
container1: {
    backgroundColor:'#FEC424',
    height: "45%",
},

socialIcon: { 
    alignItems: 'center',
    flexDirection:'row',
    marginLeft: 50,
},

container12: {
    flex: 1,
    flexDirection: 'row',
    marginTop: 20,
},    

headerImage: {
    flex: 1,
    height: 235,
    resizeMode: 'contain',
    marginRight: -30,
},

infoHeading: {
    fontSize: 25,
    fontFamily: 'robotoBold'
},

container2: {
    backgroundColor: '#fff',
    height: "55%",
    padding: 30,
    borderTopLeftRadius: 25,
    borderTopRightRadius: 25,
    zIndex: -1,
    justifyContent: 'flex-end',
},

button: {
    borderWidth: 2,
    borderRadius: 50,
    borderColor: '#FEC424',
},

buttonText: {
    textAlign: 'center',   
    textTransform: 'uppercase',
    fontSize: 16,
    padding: 10,
    color: '#FEC424',
}

【问题讨论】：

你提供了两次同一张图片:)
抱歉，已修复:)
freecodecamp.org/news/… 本教程对如何实现键盘避免视图有不同的建议。这是一个开始的好地方

标签： reactjs react-native react-native-android jsx

【解决方案1】：

您可以在TextInput 元素上使用onFocus 和onBlur 事件来检测用户何时想要写东西，以及用户何时停止写东西。例如，使用此功能，您可以在撰写本文时隐藏上层啤酒照片，因此输入将被定位得更高并且对用户可见。原生移动键盘很棘手:)

【讨论】：

谢谢，我会试试的。 :)