React Native 天才聊天中的输入被键盘覆盖
Input in react native gifted chat is covered by keyboard
我遇到了 Android 版本的问题。
我正在使用 gifted chat 进行我的应用程序聊天。但是文本输入被键盘遮住了,所以我看不到我在输入什么。
我使用的是 react-native 版本 0.51。我已经遵循了几个解决方案,但仍然无法正常工作。
我尝试 this solution 使用 keyboardAvoidingView 并添加了 KeyboardSpacer,但它也无法正常工作。
任何建议都会非常有用。
这是我的渲染组件代码
render() {
console.log(this.state);
return (
<View style={{flex: 1}}>
<GiftedChat
messages={this.state.messages}
onSend={Fire.shared.send}
loadEarlier={this.state.loadEarlier}
isLoadingEarlier={this.state.isLoadingEarlier}
user={{
name: this.props.profile.name,
_id: this.props.profile.user_id,
avatar: this.props.profile.profile_image
}}
renderUsernameOnMessage={true}
renderActions={this.renderCustomActions}
renderAvatar={this.renderAvatar}
renderBubble={this.renderBubble}
renderSend={this.renderSend}
renderSystemMessage={this.renderSystemMessage}
renderCustomView={this.renderCustomView}
renderFooter={this.renderFooter}
keyboardShouldPersistTaps={'always'}
/>
<KeyboardSpacer/>
</View>
)}
看起来这是 Android 设备上 React Native Gifted Chat 和 Expo 的常见问题。
您可以使用 react-native-keyboard-spacer
包在打开键盘后保持内容可见:
import React, { Component } from 'react';
import { View, Platform } from 'react-native';
import KeyboardSpacer from 'react-native-keyboard-spacer';
import { GiftedChat } from 'react-native-gifted-chat';
export default class Chat extends Component {
render() {
const giftedChatMessages = [
...
];
return (
<View style={{flex: 1}}>
<GiftedChat
messages={giftedChatMessages}
onSend={newMessages => onSend(newMessages[0].text)}
user={{
_id: 1,
}}
renderAvatar={() => null}
/>
{Platform.OS === 'android' ? <KeyboardSpacer /> : null }
</View>
)
}
}
我也有同样的问题。我通过在 AndroidManifest.xml 文件中添加 android:windowSoftInputMode="adjustResize"
来解决它,如下所示:
<application
android:name=".MainApplication"
android:label="@string/app_name"
...
...
>
<activity
android:name=".MainActivity"
...
...
android:windowSoftInputMode="adjustResize" <!-- add here -->
>
...
</activity>
...
</application>
这个怎么样:
import { KeyboardAvoidingView } from 'react-native';
<View style={{ flex: 1 }}>
<GiftedChat
messages={this.state.messages}
onSend={messages => this.onSend(messages)}
user={{
_id: 1,
}}
/>
{Platform.OS === 'android' && <KeyboardAvoidingView behavior="padding" />}
</View>;
我遇到了 Android 版本的问题。
我正在使用 gifted chat 进行我的应用程序聊天。但是文本输入被键盘遮住了,所以我看不到我在输入什么。
我使用的是 react-native 版本 0.51。我已经遵循了几个解决方案,但仍然无法正常工作。
我尝试 this solution 使用 keyboardAvoidingView 并添加了 KeyboardSpacer,但它也无法正常工作。
任何建议都会非常有用。
这是我的渲染组件代码
render() {
console.log(this.state);
return (
<View style={{flex: 1}}>
<GiftedChat
messages={this.state.messages}
onSend={Fire.shared.send}
loadEarlier={this.state.loadEarlier}
isLoadingEarlier={this.state.isLoadingEarlier}
user={{
name: this.props.profile.name,
_id: this.props.profile.user_id,
avatar: this.props.profile.profile_image
}}
renderUsernameOnMessage={true}
renderActions={this.renderCustomActions}
renderAvatar={this.renderAvatar}
renderBubble={this.renderBubble}
renderSend={this.renderSend}
renderSystemMessage={this.renderSystemMessage}
renderCustomView={this.renderCustomView}
renderFooter={this.renderFooter}
keyboardShouldPersistTaps={'always'}
/>
<KeyboardSpacer/>
</View>
)}
看起来这是 Android 设备上 React Native Gifted Chat 和 Expo 的常见问题。
您可以使用 react-native-keyboard-spacer
包在打开键盘后保持内容可见:
import React, { Component } from 'react';
import { View, Platform } from 'react-native';
import KeyboardSpacer from 'react-native-keyboard-spacer';
import { GiftedChat } from 'react-native-gifted-chat';
export default class Chat extends Component {
render() {
const giftedChatMessages = [
...
];
return (
<View style={{flex: 1}}>
<GiftedChat
messages={giftedChatMessages}
onSend={newMessages => onSend(newMessages[0].text)}
user={{
_id: 1,
}}
renderAvatar={() => null}
/>
{Platform.OS === 'android' ? <KeyboardSpacer /> : null }
</View>
)
}
}
我也有同样的问题。我通过在 AndroidManifest.xml 文件中添加 android:windowSoftInputMode="adjustResize"
来解决它,如下所示:
<application
android:name=".MainApplication"
android:label="@string/app_name"
...
...
>
<activity
android:name=".MainActivity"
...
...
android:windowSoftInputMode="adjustResize" <!-- add here -->
>
...
</activity>
...
</application>
这个怎么样:
import { KeyboardAvoidingView } from 'react-native';
<View style={{ flex: 1 }}>
<GiftedChat
messages={this.state.messages}
onSend={messages => this.onSend(messages)}
user={{
_id: 1,
}}
/>
{Platform.OS === 'android' && <KeyboardAvoidingView behavior="padding" />}
</View>;