反应原生导航到其他屏幕

Question

我正在尝试重定向到 CallScreen，但未调用 redirect() 函数。我的代码在https://pastebin.com/FKLfGxhR，该函数应该被调用

  options={{
  'Choose From Library': () => {
    this.redirect();
  },
}} 

这里。

函数在类中，并且是

  redirect = () => {
this.props.navigation.navigate('CallScreen')
console.log('test')

}

Answer 1

renderActions 应该是类的方法。使其成为一种方法，您还必须使用this.renderActions 而不是renderActions

class ChatScreen extends React.Component {
  renderActions = (props) => {
    return <Actions
      {...props}
      containerStyle={{
        width: 44,
        height: 44,
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: 4,
        marginRight: 4,
        marginBottom: 0,
      }}
      icon={() => (
        <Image
          style={{ width: 32, height: 32 }}
          source={{
            uri: 'https://placeimg.com/32/32/any',
          }}
        />
      )}
      options={{
        'Choose From Library': () => {
          this.redirect();
        },
      }}
      optionTintColor="#222B45"
    />
  };
    
  redirect = () => {
    this.props.navigation.navigate('CallScreen')
    console.log('test')
  }
  
  state = {
    messages: [],
  };

  get user() {
    const { name, id, avatar } = this.props.route.params;
    return {
      name: name,
      _id: id,
      avatar: avatar,
    };
  }

    componentDidMount() {
      FirebaseStorage.shared.on(message =>
        this.setState(previousState => ({
          messages: GiftedChat.append(previousState.messages, message),
        }))
      );
  }
  
  componentWillUnmount() {
      FirebaseStorage.shared.off();
  }

  render() {
    return <SafeAreaView style={{flex: 1}}>
        <GiftedChat
              messages={this.state.messages}
              onSend={FirebaseStorage.shared.send}
              user={this.user}
              alwaysShowSend
              showUserAvatar
              isAnimated
              showAvatarForEveryMessage
              renderBubble={this.renderBubble}
              renderMessageImage={() => this.showImage}
              renderUsernameOnMessage
              isTyping
              renderActions={this.renderActions}
        />
    </SafeAreaView>
  }
}

Answer 2

renderActions 应该在调用this 之前住在Component 中。

class ChatScreen extends React.Component {
  
  //..your stuff

  const renderActions = (props) => {
    return <Actions
      ...props
      options={{
        'Choose From Library': () => {
          //It is safe to call this.XXX from here
          this.redirect();
        },
      }}
    />
  };

  render() {
    return <SafeAreaView style={{flex: 1}}>
        <GiftedChat
              messages={this.state.messages}
              onSend={FirebaseStorage.shared.send}
              user={this.user}
              alwaysShowSend
              showUserAvatar
              isAnimated
              showAvatarForEveryMessage
              renderBubble={this.renderBubble}
              renderMessageImage={() => this.showImage}
              renderUsernameOnMessage
              isTyping
              renderActions={renderActions}
        />
    </SafeAreaView>
  }
  redirect = () => {
    this.props.navigation.navigate('CallScreen')
    console.log('test')
  }
}