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

Posted 2023-05-07

【中文标题】react-native-tab-view 从反应导航屏幕跳转到特定选项卡

【英文标题】：react-native-tab-view jump to specific tab from react navigation screen

【发布时间】：2020-10-24 05:10:58

【问题描述】：

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

这是 Home 中的一个元素，它拥有将我从 Home 导航到 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 
      />
    );
  
 

【参考方案1】：

您可以使用特定的选项卡操作来做到这一点：jumpTo。

函数如下：

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

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