react-native-tab-view 从反应导航屏幕跳转到特定选项卡

Question

我有 2 个用于导航的库。React 导航 v5 和 React-native-tab-view。反应导航中的 3 个选项卡：主页/发现/个人资料。Discover 是一个具有反应本机选项卡视图的屏幕。我的主页中有几个按钮，按下它们后，它们应该导航到“发现”选项卡和选项卡视图中的特定选项卡。现在，我使用反应导航进行了从“主页”到“发现”的导航。但是，导航到“发现”后如何跳转到特定选项卡？

这是主页中的一个元素，其中包含将我从主页导航到发现的按钮：

render() {
    const { error, pending, refresh, videos } = this.props;

    return (
      <HomeViewItem
        headerText={'Top Videos'}
        footerText={'More Videos'}
        navigate={() =>
          this.props.navigation.navigate('TabNavigator', {
            screen: 'Discover',
          })  // this will navigate me to Discover
        }
        view={this._renderVideos(videos, pending, error, refresh)}
      />
    );
  }

这是“发现”屏幕中的选项卡视图：

export default class DiscoverTabView extends React.Component<DiscoverProps> {
  _StreamsRoute = () => <StreamsTabScreen navigation={this.props.navigation} />;
  _NewsRoute = () => <NewsTabScreen navigation={this.props.navigation} />;
  _VideosRoute = () => <VideosTabScreen navigation={this.props.navigation} />;
  _RedditRoute = () => <RedditTabScreen navigation={this.props.navigation} />;
  _PicturesRoute = () => (
    <PicturesTabScreen navigation={this.props.navigation} />
  );

  state = {
    index: 0,
    routes: [
      { key: 'streams', title: 'Streams' },
      { key: 'news', title: 'News' },
      { key: 'videos', title: 'Videos' },
      { key: 'reddit', title: 'Reddit' },
      { key: 'pictures', title: 'Pictures' },
    ],
  };

  _handleIndexChange = (index: number) => this.setState({ index });

  componentWillUpdate() {}

  render() {
    const renderTabBar = (
      props: SceneRendererProps & { navigationState: State }
    ) => (
      <TabBar
        {...props}
        indicatorStyle={{ bottom: 6 }}
        style={{ backgroundColor: '#0C2B33', elevation: 0, shadowOpacity: 0 }}
        scrollEnabled={true}
        renderLabel={renderLabel}
        renderIndicator={renderIndicator}
        tabStyle={{ width: 87, height: 44 }}
      />
    );
    const renderLabel = ({
      route,
      focused,
      color,
    }: {
      route: Route;
      focused: boolean;
      color: String;
    }) => {
      return (
        <View style={{ width: 87, height: 44 }}>
          <Text style={focused ? styles.active : styles.inactive}>
            {route.title}
          </Text>
          <Image
            source={
              route.key === this.state.routes[this.state.routes.length - 1].key
                ? null
                : images.tabViewSeparator
            }
            style={{ position: 'absolute', alignSelf: 'flex-end', top: 10 }}
          />
          <Image
            source={
              focused ? images.tabViewIconActive : images.tabViewIconInactive
            }
            style={{
              width: 20,
              height: 20,
              alignSelf: 'center',
              position: 'absolute',
              top: 21,
            }}
          />
        </View>
      );
    };

    return (
      <TabView
        lazy={false}
        navigationState={this.state}
        renderScene={SceneMap({
          streams: this._StreamsRoute,
          news: this._NewsRoute,
          videos: this._VideosRoute,
          reddit: this._RedditRoute,
          pictures: this._PicturesRoute,
        })}
        renderTabBar={renderTabBar}
        onIndexChange={this._handleIndexChange}
        initialLayout={{ width: Dimensions.get('window').width }}
      />
    );
  }
} 

Answer 1

您可以通过使用特定的选项卡操作来完成此操作：jumpTo。

该函数如下：

import { TabActions } from '@react-navigation/native';

const jumpToAction = TabActions.jumpTo("TabName", { params });
navigation.dispatch(jumpToAction);