在鍵盤彈出窗口上擴展屏幕反應原生？

Question

我的 react-native 應用程序有問題。 在頁面底部，有文本框。 單擊某個文本框后，鍵盤彈出，所以我看不到文本框。 有沒有辦法在打開鍵盤時擴展屏幕高度，以便我可以正常看到我的文本框？ 有問題的圖片：
沒有打開鍵盤的圖片
打開鍵盤的圖片

這是我的代碼：

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',
}

Answer 1

您可以在TextInput元素上使用onFocus和onBlur事件來檢測用戶何時想要寫東西，以及用戶何時停止寫作。 使用它，例如，您可以在寫作時隱藏上部啤酒照片，因此輸入將被放置在更高的位置並且對用戶可見。 原生移動鍵盤很棘手:)