在 react native 中使用 android 上的 TextInput 存在问题

Question

我在使用 android 上的 TextInput 反应原生时遇到问题 我使用了以下代码。

导出默认类 App 扩展组件 { 使成为（） { 返回 （

  </View>
);

} }

然后屏幕如下：

screenshot before tap TextInput

当我点击 TextInput 视图时，屏幕会像使用键盘避免视图一样出现。

screenshot after tap TextInput

它在android上，但在ios上没有任何效果。 我没有使用任何其他组件。

我的 package.json 如下：

{
  "name": "example",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.1",
    "react-native": "0.57.7",
    "react-native-gesture-handler": "^1.0.10",
    "react-native-indicators": "^0.13.0",
    "react-native-maps": "^0.22.1",
    "react-native-maps-directions": "^1.6.0",
    "react-native-modal": "^7.0.1",
    "react-navigation": "^3.0.4"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.50.0",
    "react-test-renderer": "16.6.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

在 Android 上，尽管我从未使用过该组件，但为什么会有类似使用 KeyboardAvoidingView 的效果？ 为什么在ios上可以？ 我很高兴听到你的进步。 谢谢。

Answer 1

每当您使用TextInput 时，建议您使用Scrollview 作为它的父视图，并带有一个道具keyboardShouldPersistTaps="always"。这将在键盘弹出时产生一致性。

已编辑：

<View style={{flex:1}}>
    <ScrollView keyboardShouldPersistTaps="always">
      <View style={{paddingTop:20}}> //Inside ScrollView flex doesn't work so use padding to control spacing 

          // Add your <TextInput> Tag here !!

       </View>
     </ScrollView>
</View>

希望能帮到你。