React-native：如何控制键盘向上推动

Question

应用程序的结构非常简单：底部有一个搜索栏，一个列表视图和react-native-tabs。问题：如果我点击Android上的搜索栏，它会推动整个应用程序，所以我直接在键盘上看到了标签。但在iOS上，键盘覆盖整个应用程序，而不会推动任何事情。有没有办法控制它？
如果问题不清楚，我很乐意分享代码/截图 感谢

编辑：

      <View style={{flex:1, backgroundColor: '#f2f2f2'}}>
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderSearchResults.bind(this)}
            style={styles.listView}
        />
          <KeyboardAvoidingView
              style={styles.addQuestionBar}
              behavior={'position'}>
            <Text>
              Don't see your question?
            </Text>
              <TouchableOpacity>
                <Text>
                  Add it
                </Text>
              </TouchableOpacity>
          </KeyboardAvoidingView>
      </View>

Answer 1

在清单文件中设置<template> <div> <div class="panel-group" v-for="item in list"> ... {{ total = 0 }} <tr v-for="product in item.products"> ... <td> <b>Price</b><br> <span>{{ product.quantity * product.price }}</span> </td> </tr> {{ total += (product.quantity * product.price) }} <tr> <td colspan="3" class="text-right"> <b>Total: {{ total }} </b> </td> </tr> </div> </div> </template> <script> export default { ... computed: { list: function() { return this.$store.state.transaction.list }, ... } } </script> ，它将按预期运行。

E.g。

android:windowSoftInputMode="adjustPan"

Answer 2

针对使用Expo的用户

@J KW的答案是正确的，但是如果您使用的是Expo，则必须以不同的方式实现它。

Expo使用不同的配置术语。在您的app.json中，您必须设置配置密钥 "softwareKeyboardLayoutMode":"pan"在您的android对象中。 您的文件可能类似于：

{
  "expo": {
    "name": "App",
    ...
    "android":{"softwareKeyboardLayoutMode": "pan"},
    ...
  }
}

注意：如果收到“不应具有其他属性”错误，则可能是因为您没有更新的Expo SDK（v.038）。请update your Expo version。

文档：https://docs.expo.io/workflow/configuration/

Answer 3

React Native中有一个名为 KeyboardAvoidingView 的新组件尚未记录，但我已在项目中使用它并且非常有用

代码示例：

'use strict'
import { ... , KeyboardAvoidingView } from 'react-native'

class Test extends Component {
  constructor () {
    super()
    this.state = {
      behavior: 'position' 
      // there is three ways to adjust (position , height , padding ) 
    }
  }



  render(){
    return (
        <View>
          <KeyboardAvoidingView behavior={this.state.behavior}>
            <TextInput
              style={style.PhoneNumberInput}
              onChangeText={(text) => this.setState({text})}
              value={this.state.text}
              />
          </KeyboardAvoidingView>
        </View>
    )
  }

}


module.exports = Test

有关详细信息，请查看 KeyboardAvoidingViewExample

编辑：

抱歉，我从错误的想法中得出了一个错误的想法，我认为你要做的是停止Android键盘推送应用程序在这里是允许你在android中选择（Pan，Resize，Nothing）的组件< / p>

<强> react-native-android-keyboard-adjust

Answer 4

使用android:windowSoftInputMode="adjustResize".

如果您在 android:windowSoftInputMode 中为 AndroidManifest.xml 设置了“adjustPan”，则KeyboardAvoidingView 和其他与键盘相关的组件不能很好地工作。

相反，您应该使用“adjustResize”并拥有美好的生活。

我有“adjustPan”并尝试使用 KeyboardAvoidingView 和 KeyboardAwareScrollView ......没有任何效果。

现在，通过“adjustResize”，我没有使用任何与键盘相关的组件，我的 android 应用程序可以运行。 （我可能必须在 iOS 上使用 KeyboardAvoiding 视图，但它可以开箱即用。）