反应本机KeyboardAvoidingView将顶部输入移出屏幕

时间:2019-10-21 22:06:17

标签: react-native keyboard scrollview expo

我有一个带有少量输入的项目,我发现了底部的输入不再被键盘隐藏的方法。但是,通过此解决方案,我发现,如果点击顶部的输入,则会得到相同的行为,并且它们会移出屏幕(并且用户无法再看到他或她正在输入的内容)

这是我关于此问题的代码:

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
}

0 个答案:

没有答案