我有一个带有少量输入的项目,我发现了底部的输入不再被键盘隐藏的方法。但是,通过此解决方案,我发现,如果点击顶部的输入,则会得到相同的行为,并且它们会移出屏幕(并且用户无法再看到他或她正在输入的内容)
这是我关于此问题的代码:
const keyboardVerticalOffset = Platform.OS === 'ios' ? 10 : 10
<KeyboardAwareScrollView showsVerticalScrollIndicator={true} style={{
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
backgroundColor: "#d1d1d1",
position: 'relative',
flex: 1
}}
contentStyle={{
}}>
<KeyboardAvoidingView behavior='position' keyboardVerticalOffset={keyboardVerticalOffset}>
<Text
style={{
fontSize: 28,
color: "#404040",
fontWeight: "700",
marginLeft: 12,
marginBottom: 10,
marginTop: 20,
textAlign: "center"
}}
>
Enter your details below
</Text>
<Form>
<Item stackedLabel rounded style={{borderColor:'rgba(0,0,0,0)', marginLeft: 5, marginRight:5}}>
<View style={styles.textInputStyle}>
<Input
placeholderTextColor="#9e9e9e"
placeholder="Address (Street, City)"
onChangeText={e => this.setState({ address: e })}
style={{ fontFamily: "nunito" }}
/>
</View>
</Item> //there are a lot more items but I don't want to paste them here and make this post larger than it should be
</Form>
</KeyboardAvoidingView>
</KeyboardAwareScrollView>
编辑:我发现底部的输入也没有一直向上移动,而是与键盘的顶部(键盘结束且项目的屏幕开始)对齐了,所以也许那里某处的暗示更大的东西
编辑2:这是我的app.json和package.json的副本 app.json
{
"expo": {
"name": "CCC",
"slug": "ccc",
"privacy": "public",
"sdkVersion": "33.0.0",
"platforms": [
"ios",
"android"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"android": {
"package": "abc.abc.abc"
},
"ios": {
"supportsTablet": false
},
"description": ""
}
}
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"@expo/vector-icons": "^10.0.6",
"axios": "^0.19.0",
"expo": "^33.0.0",
"expo-font": "~5.0.1",
"firebase": "^6.5.0",
"formik": "^1.5.8",
"global": "^4.4.0",
"native-base": "^2.12.1",
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-elements": "^0.18.5",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-modal": "^11.3.1",
"react-native-paper": "^2.16.0",
"react-native-smart-carousel": "^1.1.0",
"react-native-snap-carousel": "3.6.0",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^3.11.0",
"styled-components": "^4.2.0",
"truffle": "^5.0.34",
"uuid": "^3.3.3",
"web3": "0.19"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
},
"private": true
}