Question

我正在使用RN v0.46.4，react-navigation和sendbird。

我正在开发一个聊天应用程序。

我要做的是用两个参数item（包含用户信息）和createdChannel将用户导航到消息屏幕。

它们被传递但只传递一次，即每次我导航到不同用户的Msg屏幕时，我都会收到我先按下的相同值。

聊天屏幕

_chat(item){

 // console.log(item);
 const { navigate } = this.props.navigation

  var userIds = [item.id,1];
  sb = new SendBird({appId: APP_ID});
  sb.connect(1, function(user, error) {
         //console.log(user);
      sb.GroupChannel.createChannelWithUserIds(userIds, true, item.firstname, function(createdChannel, error) {
    if (error) {
        console.error(error);
        return;
    }

   //console.log(createdChannel);
   navigate('Msg', { item, createdChannel })

});

此外，当我在createdChannel中控制_chat function时，它会按预期提供roght信息。

但是当我在Msg屏幕中对其进行控制时，我只收到第一个已创建的已创建的通道，已在上面说过。

消息屏幕

 super(props);
  console.log(props.navigation.state.routes[1].params.createdChannel);

我的路由器结构：

const CustomTabRouter = TabRouter(
  {

    Chat: {
      screen: ChatStack, 
      path: ""
    }
}

ChatStack

const ChatStack= StackNavigator({
      Chat:{screen: Chats,
      navigationOptions: {
       header: null,
     }},

      Msg: {
      screen: Msg,
      navigationOptions: ({ navigation}) => ({
       title: `${navigation.state.params.item.firstname} ${navigation.state.params.item.lastname}`,
        tabBarVisible: false

      })
    },
    })

Answer 1

在Msg屏幕的构造函数中，尝试通过调用var tmp = ((_canExecute == null) || (_canExecute(parameter))); return tmp;来访问item和createdChannel。

props.navigation.state.params.createdChannel

Answer 2

我发现自己处于类似情况。在我的情况下，问题是因为有意地从lib（1.0.0-beta21到1.0.0-beta22）中删除了将参数传递给嵌套屏幕。

注意：但截至目前，react-navigation版本为v1.5.2

https://github.com/react-navigation/react-navigation/issues/3252

无论如何，我的快速而肮脏的解决方案是使用screenProps将道具注入屏幕。

const ChatStack= StackNavigator({
  Chat:{ screen: Chats, ... },
  Msg: { screen: Msg, ... },
});

// Instead of exporting ChatStack directly, create a wrapper and pass navigation.state.params to screenProps

export default (props) => {
  const params = props.navigation.state.params;
  // const params = _.get(props, 'navigation.state.params');
  return (
    <ChatStack screenProps={params} />
  );
};

现在ChatStack下的所有屏幕都可以访问注入的道具。

将导航参数作为道具发送到其他组件

2 个答案: