键盘识别滚动视图在android上不起作用

时间:2017-11-23 19:34:46

标签: android react-native scroll react-native-android react-native-ios

我想使用react-native-keyboard-aware-scroll-view(Github:

它在iOS上运行良好,但在Android上,我遇到了这个问题:

enter image description here

我的所有视图都在这个特殊的滚动视图中,它适用于iOS,所以我不知道为什么......

有我的代码:

<KeyboardAwareScrollView  contentContainerStyle={{flex : 1}} scrollEnabled={false}>
            <StatusBar translucent={true} backgroundColor={"rgba(0, 0, 0, 0)" } barStyle="light-content" />
            <ImageBackground style={{flex : 1}} source={require("../../../resources/background.jpeg")}>
            <LinearGradient style={styles.mainstyle} colors={['rgba(255, 117, 0, 0.9)', 'rgba(255, 0, 48, 0.9)']} start={{x: 0.5, y: 1}} end={{x: 0.75, y: 0.5}}>

                <Text style={styles.logo}>TOTO</Text>


                <View style={{width : "100%", height : "10%", alignItems: "center", flexDirection: "row", marginTop : "35%", justifyContent:"center"}}>
                    <Image style={{width : "10%", height : "50%", marginTop : "5%", marginRight: "6%"}} source={require("../../../resources/whiteUser.png")}/>
                    <TextInput
                        style={{width: "70%", height : "60%", borderBottomWidth: 1, borderBottomColor : "white", }}

                        placeholder={"Pseudo ou e-mail"}
                        placeholderTextColor={"#fff"}
                        keyboardType={'email-address'}
                        autoCapitalize={'none'}
                        underlineColorAndroid='rgba(0,0,0,0)'

                        spellCheck={false}
                        autoCorrect={false}

                        onChangeText={(text) => {this.loginChanged(text)}}/>
                </View>


                <View style={{width : "100%", height : "10%", alignItems: "center", flexDirection: "row", marginTop : "5%", justifyContent:"center"}}>

                    <Image style={{width : "10%", height : "55%", marginRight: "6%"}} source={require("../../../resources/whiteLock.png")}/>

                    <TextInput
                        secureTextEntry={true}
                        style={{width: "70%", height : "60%", borderBottomWidth: 1, borderBottomColor : "white"}}
                        placeholder={"Mot de passe"}
                        placeholderTextColor={"#fff"}
                        autoCapitalize={'none'}
                        underlineColorAndroid='rgba(0,0,0,0)'
                        onChangeText={(text) => {this.passwordChanged(text)}}/>
                </View>
            <TouchableOpacity onPress={() => {this.sendLoginData()}} style={styles.whiteButton}>
                <Text style={{textAlign:"center", fontSize:25, color:"#FF0030"}}>Connexion</Text>
            </TouchableOpacity>
            </LinearGradient>

            </ImageBackground>
        </KeyboardAwareScrollView>

我的所有样式表:

const styles = StyleSheet.create({
mainstyle: {
    flex:1,
    flexDirection: 'column',
    alignItems: 'center',
    backgroundColor : "rgba(0, 0, 0, 0)"
},
whiteButton : {
    borderWidth:1,
    marginTop: "3%",
    backgroundColor:"white",
    width:"80%",height:"8%",
    borderRadius : 30,
    borderColor:"white",
    marginBottom:10,
    overflow: "hidden",
    padding : 4
},
logo : {
    height : "7%",
    marginTop : "40%",
    fontSize: 40,
    color : "white",
    fontFamily : "Bjorn"

}
}

我在想,也许它是我的样式表或我使用容器的方式,但它在iOS上完美运行所以我没有线索

1 个答案:

答案 0 :(得分:0)

在Android中使用该库时遇到了一些问题。我通过在windowSoftInputMode中将adjustPan设置为AndroidManifest.xml来解决了这个问题。

有关windowSoftInputMode可接受值的更多信息,请检查docs