Использование пользовательских вкладок с помощью StackNavigator?

У меня есть список пользователей, каждый пользователь имеет отображаемое изображение в списке.

Я пытаюсь, когда пользователь нажимает на экранное изображение, перенаправляется на свой профиль через stackNavigation.

CustomTabView:

    const CustomTabView = ({ router, navigation }) => {
  const { routes, index } = navigation.state;

  const ActiveScreen = router.getComponentForState(navigation.state);

  const routeNav = addNavigationHelpers({
    ...navigation,
    state: routes[index],
  });
  const routeOptions = router.getScreenOptions(routeNav, 'tabBar');
  return (
    <View style={styles.container}>
      <CustomTabBar
        navigation={navigation}
        activeRouteName={routes[index].routeName}
        icon={routeOptions.tabBarIcon}
      />
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index]
        })}
      />
    </View>
  );
};

StackNavigator://goToProfile.js//также попытался разместить в index.anndroid.js, но не нашел способ экспорта

const goToProfile = StackNavigator({
  Profile: {
    screen: Profile,
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.person.name.first} ${navigation.state.params.person.name.last}`
    })
  },
})

пользовательские вкладки://index.android.js

const CustomTabRouter = TabRouter(
  {
    Chat: {
      screen: Chats,
      path: ""
    },
    Status: {
      screen: Contacts,
      path: "notifications"
    },
    Camera: {
      screen: Camera,
      path: "settings"
    }
  },
  {
    initialRouteName: "Chat",
  },


     );

    const CustomTabs = createNavigationContainer(
     createNavigator(CustomTabRouter)(CustomTabView)
    );

Также мой компонент:

          <TouchableOpacity
            onPress = { () =>  this.props.navigation.navigate('Profile', { item } ) }  >
              <Avatar
                source={{ uri: item.picture.thumbnail }}
              />
          </TouchableOpacity>

Ответ 1

Ваш Stack Navigator будет выглядеть следующим образом:

    const ChatStack= StackNavigator({
      Chat:{screen: Chat,
      navigationOptions: {
       header: null,
     }},
     Profile: {
        screen: Profile,
        navigationOptions: ({ navigation }) => ({
          title: `${navigation.state.params.person.name.first} ${navigation.state.params.person.name.last}`,
          tabBarVisible: false
         // depending if you want to hide the tabBar on the profile page if not remove it.
        })
      },
    })

Тогда ваш customTab примет эту форму:

const CustomTabRouter = TabRouter(
  {
    Chat: {
      screen: ChatStack,
    },
    Status: {
      screen: Contacts,
      path: "notifications"
    },
    Camera: {
      screen: Camera,
      path: "settings"
    }
  },
.........

С этими изменениями вы сможете перейти к экрану "Профиль" с помощью

this.props.navigation.navigate('Profile', { item } )

Ответ 2

Вы хотите отправить действие навигации, а не визуализировать новый стек. Хотя я не уверен, что ваши навигаторы построены правильно, чтобы это удалось...

_goToProfile = (person) => {
  <goToProfile navigate={this.props.navigation} />
}

должен быть

_goToProfile = (person) => {
  this.props.navigation.navigate('Profile', person)
}