天然React:如何控制键盘上推

pzfprimi  于 2023-03-31  发布在  React
关注(0)|答案(7)|浏览(101)

App的结构非常简单:一个搜索栏,一个列表视图和底部的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>
uqcuzwp8

uqcuzwp81#

在manifest文件中设置android:windowSoftInputMode="adjustPan",它将按照您的预期工作。
例如:

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

8yparm6h2#

使用Expo的用户

@J KW的答案是正确的,但如果你使用Expo,你将不得不以不同的方式实现它。
Expo使用不同的配置术语。在app.json中,您必须在android对象中设置配置键"softwareKeyboardLayoutMode":"pan"。您的文件可能看起来像这样:

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

注意:如果您收到“不应该有附加属性”错误,很可能是因为您没有更新的Expo SDK(v.038)。请update your Expo version
文件:https://docs.expo.io/workflow/configuration/

imzjd6km

imzjd6km3#

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中

**第一个e第一个f第一个x

sigwle7e

sigwle7e4#

使用android:windowSoftInputMode="adjustResize".

如果您在AndroidManifest.xml中为android:windowSoftInputMode设置了“adjustPan”,KeyboardAvoidingView和其他与键盘相关的组件将无法正常工作。
相反,你应该使用“adjustResize”,拥有美好的生活。
我有“adjustPan”,并尝试使用KeyboardAvoidingView和KeyboardAwareScrollView...没有任何工作。
现在,使用“adjustResize”,我不使用任何与键盘相关的组件,我的Android应用程序可以正常工作。(我可能必须在iOS上使用KeyboardAvoiding视图,但它可以开箱即用。)

mwngjboj

mwngjboj5#

@binkie的答案在我的expo(Version 44.0.0)应用程序中起作用,但略有变化。在app.json中,

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

在屏幕中,边距底部值等于底部选项卡的高度,如下图所示

<ScrollView mb="70px">...</ScrollView>
ao218c7q

ao218c7q6#

****1)修改android/src/main/AndroidMainfest.xml中的AndroidMainfest.xml您可以通过更改

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

          the problem will be resolvede****
nfs0ujit

nfs0ujit7#

我遇到了同样的问题,而React Native - Javascript,SafeAreaViewScrollView解决了这个问题

<SafeAreaView style={styles.container}>
    <ScrollView  > 
      <View style={styles.body}>
....

 container: {
    flex: 1,
    backgroundColor: 'white' 
  },

相关问题