React native Gifted Chat：选择send按钮后如何保持焦点输入（RN、Native base、Gifted Chat）
使用React Native和gifted chat，我制作了聊天屏幕。但是，我在发送消息时遇到问题 原样（问题）：键盘消失，只要键入消息并选择发送按钮，焦点就会消失 要做的事情：选择发送按钮后，要保留键盘和焦点输入字段 这是我的密码 Chat.jsReact native Gifted Chat：选择send按钮后如何保持焦点输入（RN、Native base、Gifted Chat）,react-native,react-native-gifted-chat,React Native,React Native Gifted Chat,使用React Native和gifted chat，我制作了聊天屏幕。但是，我在发送消息时遇到问题 原样（问题）：键盘消失，只要键入消息并选择发送按钮，焦点就会消失 要做的事情：选择发送按钮后，要保留键盘和焦点输入字段 这是我的密码 Chat.js const onSend = messages => { const getRoomKey = navigation.getParam("roomKey"); firebaseService.saveMsg(userData,
const onSend = messages => {
const getRoomKey = navigation.getParam("roomKey");
firebaseService.saveMsg(userData, getRoomKey, messages);
};
const renderInputToolBar = () => {
const props = {
onSend,
timeDiffSeconds,
status
};
return <ChatInputBox {...props} />;
};
const dateFilter = (previous, current) => {
const previousDate = moment(previous.createdAt).format(
"MMMM Do YYYY, h:mm"
);
const currentDate = moment(current.createdAt).format("MMMM Do YYYY, h:mm");
if (previousDate !== currentDate) {
return current.user.name;
} else {
return false;
}
};
const renderAvatar = props => {
return <Avatar {...props} />;
};
const renderBubble = props => {
const currentMessage = props.currentMessage;
const previousMessage = props.previousMessage;
const nextMessage = props.nextMessage;
console.log(currentMessage);
if (currentMessage._id == "univel_chat_noti") {
return (
<View style={{ justifyContent: "center", alignContent: "center" }}>
<Text style={{ fontSize: 12, color: "white" }}>
{currentMessage.text}
</Text>
</View>
);
} else if (currentMessage.user._id == "univel_chat_leaveroom") {
return (
<View style={{ justifyContent: "center", alignContent: "center" }}>
<Text style={{ fontSize: 12, color: "white" }}>
{currentMessage.text}
</Text>
</View>
);
}
const currentDate = moment(currentMessage.createdAt).format(
"MMMM Do YYYY, h:mm"
);
const previousDate = moment(previousMessage.createdAt).format(
"MMMM Do YYYY, h:mm"
);
const nextDate = moment(nextMessage.createdAt).format("MMMM Do YYYY, h:mm");
const previousUser = previousMessage.user;
const currentUser = currentMessage.user;
if (
previousDate === currentDate &&
previousUser &&
previousUser._id == currentUser._id
) {
props.currentMessage.user.avatar = "is null";
} else {
// console.log({
// currentDate,
// nextDate
// })
}
return (
<View style={{}}>
(currentDate !== previousDate ||
(currentDate == previousDate &&
previousUser &&
previousUser._id != currentUser._id)) &&
userData.nickname !== currentMessage.user.name && (
<Text style={styles.name}>{currentMessage.user.name}</Text>
)}
<Bubble
textStyle={{
left: {
color: "#F7F7F7"
}
}}
wrapperStyle={{
left: {
backgroundColor: "#37393B"
}
}}
{...props}
/>
</View>
);
};
return (
<View style={styles.container}>
{
<GiftedChat
alwaysShowSend={true}
textInputProps={{autoFocus: true, blurOnSubmit: false}}
locale={"kr"}
messages={msg}
user={{
_id: userData._id
}}
renderInputToolbar={renderInputToolBar}
isKeyboardInternallyHandled-={false}
keyboardShouldPersistTaps="always"
renderChatEmpty={() => {
return (
<StatusAlert
message={
"start"
}
image={messageImage}
imageSetting={{ width: 90, height: 85 }}
customStyle={{ transform: [{ scaleY: -1 }] }}
/>
);
}}
renderBubble={renderBubble}
//renderMessage={renderMessage}
renderChatFooter={() => {
let hour = Math.floor(timeDiffSeconds / 3600);
let min = Math.floor((timeDiffSeconds % 3600) / 60);
}}
onPressAvatar={user => {
console.log("click user = ", user);
setReportPopupState("twoButtonModal");
setReportTarget(user);
}}
showAvatarForEveryMessage={true}
keyboardShouldPersistTaps="always"
/> }
import React, { useState, useRef, useEffect, useCallback } from 'react'
import { View, Text, Item, Input } from 'native-base'
import {
Platform,
StyleSheet,
TouchableOpacity,
KeyboardAvoidingView,
TouchableWithoutFeedback,
Keyboard,
TextInput
} from "react-native";
const ChatInputBox = ({ onSend, timeDiffSeconds, status }) => {
const [message, setMessage] = useState('');
const send = (message) => {
if (message !== '') {
onSend(message)
setMessage('')
} else {
return;
}
}
const inputEl = useRef();
const focusInput = useCallback(() => {
inputEl.current.focus();
console.log("checkFocus", inputEl.current)
}, [])
useEffect(() => {
focusInput
send
}, []);
// }else{
return (
<View keyboardShouldPersistTaps="always" style={styles.container} opacity={message !== '' ? .8 : .5}>
<Item rounded style={styles.inputBox}>
<Input placeholder='Type a message'
multiline={true}
style={{ textAlignVertical: 'top' }}
autoFocus={true}
onChangeText={(message) => setMessage(message)}
keyboardAppearance={'light'}
value={message}
ref={inputEl}
blurOnSubmit={true}
/>
<TouchableOpacity style={styles.sendText} onPress={() => send(message) && focusInput} >
<Text style={message !== '' && { color: '#FFFFFF', fontWeight: 'bold', paddingLeft: 5, paddingBottom: 5, paddingTop: 5, paddingRight: 5 }}>send</Text>
</TouchableOpacity>
</Item>
</View>
)
}
// }
export default ChatInputBox
const onSend=messages=>{
const getRoomKey=navigation.getParam（“roomKey”）；
saveMsg（用户数据、getRoomKey、消息）；
};
常量renderInputToolBar=（）=>{
常量道具={
总之，
时间差秒，
地位
};
返回；
};
const dateFilter=（上一个，当前）=>{
const previousDate=时刻（previous.createdAt）.format(
“MMMM Do YYYY，h:mm”
);
const currentDate=moment（current.createdAt）.format（“MMMM-Do-YYYY，h:mm”）；
如果（上一个日期！==当前日期）{
返回current.user.name；
}否则{
返回false；
}
};
const renderAvatar=props=>{
返回；
};
常量渲染气泡=道具=>{
const currentMessage=props.currentMessage；
const previousMessage=props.previousMessage；
const nextMessage=props.nextMessage；
console.log（currentMessage）；
如果（currentMessage.\u id==“univel\u chat\u noti”）{
返回(
{currentMessage.text}
);
}else if（currentMessage.user.\u id==“univel\u chat\u leaveroom”）{
返回(
{currentMessage.text}
);
}
const currentDate=时刻（currentMessage.createdAt）.format(
“MMMM Do YYYY，h:mm”
);
const previousDate=时刻（previousMessage.createdAt）.format(
“MMMM Do YYYY，h:mm”
);
const nextDate=moment（nextMessage.createdAt）.format（“MMMM Do YYYY，h:mm”）；
const-previousUser=previousMessage.user；
const currentUser=currentMessage.user；
如果(
previousDate==当前日期&&
前用户&&
上一个用户。\u id==当前用户。\u id
) {
props.currentMessage.user.avatar=“为空”；
}否则{
//console.log({
//当前日期，
//下一天
// })
}
返回(
（当前日期！==以前的日期||
（currentDate==以前的日期&&
前用户&&
上一个用户。_id！=当前用户。_id））&&
userData.昵称！==currentMessage.user.name&&(
{currentMessage.user.name}
)}
);
};
返回(
{
{
返回(
);
}}
renderBubble={renderBubble}
//renderMessage={renderMessage}
RenderChartFooter={（）=>{
设小时=数学楼层（timeDiffSeconds/3600）；
最小值=数学楼层（（timeDiffSeconds%3600）/60）；
}}
onPressAvatar={user=>{
console.log（“单击user=”，user）；
SetReportPopupUpState（“twoButtonModal”）；
setReportTarget（用户）；
}}
showAvatarForEveryMessage={true}
键盘应为PersistTaps=“始终”
/> }
const onSend = messages => {
const getRoomKey = navigation.getParam("roomKey");
firebaseService.saveMsg(userData, getRoomKey, messages);
};
const renderInputToolBar = () => {
const props = {
onSend,
timeDiffSeconds,
status
};
return <ChatInputBox {...props} />;
};
const dateFilter = (previous, current) => {
const previousDate = moment(previous.createdAt).format(
"MMMM Do YYYY, h:mm"
);
const currentDate = moment(current.createdAt).format("MMMM Do YYYY, h:mm");
if (previousDate !== currentDate) {
return current.user.name;
} else {
return false;
}
};
const renderAvatar = props => {
return <Avatar {...props} />;
};
const renderBubble = props => {
const currentMessage = props.currentMessage;
const previousMessage = props.previousMessage;
const nextMessage = props.nextMessage;
console.log(currentMessage);
if (currentMessage._id == "univel_chat_noti") {
return (
<View style={{ justifyContent: "center", alignContent: "center" }}>
<Text style={{ fontSize: 12, color: "white" }}>
{currentMessage.text}
</Text>
</View>
);
} else if (currentMessage.user._id == "univel_chat_leaveroom") {
return (
<View style={{ justifyContent: "center", alignContent: "center" }}>
<Text style={{ fontSize: 12, color: "white" }}>
{currentMessage.text}
</Text>
</View>
);
}
const currentDate = moment(currentMessage.createdAt).format(
"MMMM Do YYYY, h:mm"
);
const previousDate = moment(previousMessage.createdAt).format(
"MMMM Do YYYY, h:mm"
);
const nextDate = moment(nextMessage.createdAt).format("MMMM Do YYYY, h:mm");
const previousUser = previousMessage.user;
const currentUser = currentMessage.user;
if (
previousDate === currentDate &&
previousUser &&
previousUser._id == currentUser._id
) {
props.currentMessage.user.avatar = "is null";
} else {
// console.log({
// currentDate,
// nextDate
// })
}
return (
<View style={{}}>
(currentDate !== previousDate ||
(currentDate == previousDate &&
previousUser &&
previousUser._id != currentUser._id)) &&
userData.nickname !== currentMessage.user.name && (
<Text style={styles.name}>{currentMessage.user.name}</Text>
)}
<Bubble
textStyle={{
left: {
color: "#F7F7F7"
}
}}
wrapperStyle={{
left: {
backgroundColor: "#37393B"
}
}}
{...props}
/>
</View>
);
};
return (
<View style={styles.container}>
{
<GiftedChat
alwaysShowSend={true}
textInputProps={{autoFocus: true, blurOnSubmit: false}}
locale={"kr"}
messages={msg}
user={{
_id: userData._id
}}
renderInputToolbar={renderInputToolBar}
isKeyboardInternallyHandled-={false}
keyboardShouldPersistTaps="always"
renderChatEmpty={() => {
return (
<StatusAlert
message={
"start"
}
image={messageImage}
imageSetting={{ width: 90, height: 85 }}
customStyle={{ transform: [{ scaleY: -1 }] }}
/>
);
}}
renderBubble={renderBubble}
//renderMessage={renderMessage}
renderChatFooter={() => {
let hour = Math.floor(timeDiffSeconds / 3600);
let min = Math.floor((timeDiffSeconds % 3600) / 60);
}}
onPressAvatar={user => {
console.log("click user = ", user);
setReportPopupState("twoButtonModal");
setReportTarget(user);
}}
showAvatarForEveryMessage={true}
keyboardShouldPersistTaps="always"
/> }
import React, { useState, useRef, useEffect, useCallback } from 'react'
import { View, Text, Item, Input } from 'native-base'
import {
Platform,
StyleSheet,
TouchableOpacity,
KeyboardAvoidingView,
TouchableWithoutFeedback,
Keyboard,
TextInput
} from "react-native";
const ChatInputBox = ({ onSend, timeDiffSeconds, status }) => {
const [message, setMessage] = useState('');
const send = (message) => {
if (message !== '') {
onSend(message)
setMessage('')
} else {
return;
}
}
const inputEl = useRef();
const focusInput = useCallback(() => {
inputEl.current.focus();
console.log("checkFocus", inputEl.current)
}, [])
useEffect(() => {
focusInput
send
}, []);
// }else{
return (
<View keyboardShouldPersistTaps="always" style={styles.container} opacity={message !== '' ? .8 : .5}>
<Item rounded style={styles.inputBox}>
<Input placeholder='Type a message'
multiline={true}
style={{ textAlignVertical: 'top' }}
autoFocus={true}
onChangeText={(message) => setMessage(message)}
keyboardAppearance={'light'}
value={message}
ref={inputEl}
blurOnSubmit={true}
/>
<TouchableOpacity style={styles.sendText} onPress={() => send(message) && focusInput} >
<Text style={message !== '' && { color: '#FFFFFF', fontWeight: 'bold', paddingLeft: 5, paddingBottom: 5, paddingTop: 5, paddingRight: 5 }}>send</Text>
</TouchableOpacity>
</Item>
</View>
)
}
// }
export default ChatInputBox
import React，{useState，useRef，useffect，useCallback}来自“React”
从“本机基”导入{视图、文本、项、输入}
进口{
平台，
样式表，
可触摸不透明度，
键盘避免了gView，
可触摸且无反馈，
键盘
文本输入框
}从“反应本族语”；
const ChatInputBox=（{onSend，timeDiffSeconds，status}）=>{
const[message，setMessage]=useState（“”）；
常量发送=（消息）=>{
如果（消息！=''）{
onSend（消息）
设置消息（“”）
}否则{
返回；
}
}
const inputEl=useRef（）；
const focusInput=useCallback（（）=>{
inputEl.current.focus（）；
console.log（“checkFocus”，inputEl.current）
}, [])
useffect（（）=>{
聚焦输入
发送
}, []);
//}其他{
返回(
设置消息（消息）}
键盘外观={'light'}
值={message}
ref={inputEl}
blurOnSubmit={true}
/>
发送（消息）&&focusInput}>
发送
)
}
// }
导出默认ChatInputBox
(
(