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

android:windowSoftInputMode="adjustPan"在您的清单文件中设置,它将按预期工作.

例如

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  ...
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    ...
    android:windowSoftInputMode="adjustPan">
    ...
  </activity>
  ...
</application>

Answer 2

对于那些使用 Expo 的人

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

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

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

注意：如果您收到“不应有附加属性”的错误消息，很可能是因为您没有更新的 Expo SDK (v.038)。请更新您的 Expo 版本。

文档：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

反应 - 原生的Android键盘调整