本地反应: 如何控制键盘向上推动什么

这个应用程序的结构相当简单: 一个搜索栏，一个列表视图和底部的本机反应标签。问题是: 如果我点击 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>
109816 次浏览
小开

There is new Component called KeyboardAvoidingView from React Native not documented yet but i already use it in my project and its very useful

Code Example:

'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

and for more details you can check KeyboardAvoidingViewExample

EDIT:

Sorry i just got the wrong idea from the question i think what you are trying to do is stop the android keyboard from pushing the application up here is component that allow you to choose between (Pan, Resize, Nothing) in android

react-native-android-keyboard-adjust

小开

Set android:windowSoftInputMode="adjustPan" in your manifest file, and it will work as you expect.

E.g.

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

For those using Expo

@J KW's answer is correct but if you're using Expo you will have to implement it differently.

Expo uses different configuration terms. In your app.json you have to set the configuration key "softwareKeyboardLayoutMode":"pan" in your android object. Your file might look something like:

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

Note: If you are receiving a "should NOT have additional property" error, it's likely because you don't have the updated Expo SDK (v.038). Please update your Expo version.

Documentation: https://docs.expo.io/workflow/configuration/

小开

Use android:windowSoftInputMode="adjustResize".

KeyboardAvoidingView and other keyboard-related components don't work quite well if you have "adjustPan" set for your android:windowSoftInputMode in AndroidManifest.xml.

Instead, you should use "adjustResize" and have a wonderful life.

I had "adjustPan" and tried using KeyboardAvoidingView and KeyboardAwareScrollView... nothing worked.

Now, with "adjustResize", i'm not using any keyboard-related component and my android app works. (I might have to use KeyboardAvoiding view on iOS, but it will work out of the box.)

小开

@binkie's answer worked for my expo (Version 44.0.0) app with a slight change. In app.json,

"android":{"softwareKeyboardLayoutMode": "pan"}

In the screen, margin bottom value equal to height of the bottom tab like so

<ScrollView mb="70px">...</ScrollView>
小开

****1) modify the AndroidMainfest.xml in android/src/main/AndroidMainfest.xml u can solve the issue by changing the

       $ android:windowSoftInputMode="adjustResize";
to
$ android:windowSoftInputMode="adjustPan";




the problem will be resolvede****

提交答案