我想使用react-native-keyboard-aware-scroll-view(Github:
它在iOS上运行良好,但在Android上,我遇到了这个问题:
我的所有视图都在这个特殊的滚动视图中,它适用于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上完美运行所以我没有线索
答案 0 :(得分:0)
在Android中使用该库时遇到了一些问题。我通过在windowSoftInputMode
中将adjustPan
设置为AndroidManifest.xml
来解决了这个问题。
有关windowSoftInputMode
可接受值的更多信息,请检查docs。