Я изучаю React Native, и это мой первый пост в переполнении стека.
Я пытаюсь перерисовать кнопку, чтобы изменить ее свойство disabled
с false
на true
когда onPress
.
Эта кнопка визуализируется вручную внутри renderMessageImage
из response-native-gifted-chat.
Я делаю это через логическое значение в this.state
, однако я см. обновление значения состояния в журналах, но визуально кнопка остается прежней, и ее можно нажимать снова и снова, фактически не изменяя ее свойство disabled
.
Я имею в своем классе Chat.js
:
constructor(props) {
super(props);
this.state = {
isButtonDisabled: false
};
}
Затем из Gifted Chat я звоню renderMessageImage
, чтобы показать пользовательский дизайн сообщения, когда сообщение имеет изображение:
renderMessageImage = (props) => {
return (
<View>
<Button
title="Disable Button"
disabled={this.state.isButtonDisabled}
onPress={() => this.disableButton(props.currentMessage.id)}
/>
</View>)
}
Этот пользовательский дизайн - просто кнопка, которая должна вызывать другой метод и затем отключите себя:
disableButton = async (message_id) => {
console.log("Disabling message_id: " + message_id); //This shows the msg_id correctly where the button is
console.log(this.state.isButtonDisabled); //This shows false
this.setState(previousState => ({
isButtonDisabled: true
}));
console.log(this.state.isButtonDisabled); //This shows true (should update button disabled property)
return true;
}
Для того, что я тестировал до сих пор, я вижу, что значение состояния isButtonDisabled
правильно меняется с false
на true
, и, как я прочитал, изменение состояния должно привести к повторной визуализации компонента, но к сожалению, это не работает таким образом.
Более глубокое тестирование:
Затем я направился к GiftedChat.js
источникам из react-native-gifted-chat
, чтобы попытаться отладить некоторые из код и посмотреть, что там происходит. Я обнаружил, что всякий раз, когда я нажимаю свою пользовательскую кнопку, componentDidUpdate
из GiftedChat.js
вызывается дважды:
componentDidUpdate(prevProps = {}) {
const { messages, text, inverted } = this.props;
console.log(this.props !== prevProps); //This is called twice per button click
if (this.props !== prevProps) {
//this.setMessages(messages || []); //I changed this line for the line below to directly update state
this.setState({ messages });
console.log(this.props !== prevProps); //This is called once per button click (first of the two calls)
}
if (inverted === false &&
messages &&
prevProps.messages &&
messages.length !== prevProps.messages.length) {
setTimeout(() => this.scrollToBottom(false), 200);
}
if (text !== prevProps.text) {
this.setTextFromProp(text);
}
}
После того, как все это проверено, я вижу, что состояние обновляется, и GiftedChat.js
компонент и сообщения обновляются один раз за нажатие кнопки, однако моя кнопка в renderMessageImage
никогда не выполняет повторный рендеринг, чтобы правильно отобразить новое значение disabled
и фактически отключиться.
Я совершенно не понимаю, что еще для тестирования, поэтому я был бы очень признателен за помощь в том, что я делаю неправильно.
Заранее большое спасибо.
Редактировать: renderMessageImage
называется GiftedChat в моем разделе Chat.js
class render()
, тогда GiftedChat будет вызывать this.renderMessageImage
всякий раз, когда в сообщении есть изображение (например, this.state.messages[i].image != undefined
). Эта часть работает правильно, все вызывается так, как должно, только повторная визуализация состояния кнопки (disabled
) не обновляется:
render() {
return (
<View style={{ flex: 1 }}>
<GiftedChat
messages={this.state.messages}
onSend={this.sendMessage}
user={this.user}
placeholder={"Write a message..."}
renderMessageImage={this.renderMessageImage}
/>
<KeyboardAvoidingView behavior={'padding'} keyboardVerticalOffset={80}/>
</View>
);
}