Question

我正在处理的屏幕需要一些标签导航。它的工作很棒，但是有一个问题。仅当我按要转到的选项卡时，它才使组件处于滑动状态。它什么也没做。例如：我在标签3上，我想转到标签1。如果我单击选项卡1，则什么也不会发生。我必须在过程中通过选项卡2滑动到它。我不要那个。这是我的代码。

<TabView
   navigationState={this.state}
   renderScene={this.renderScene}
   onIndexChange={index => this.setState({ index })}
   initialLayout={{ width: Dimensions.get('window').width }}
 />

渲染场景功能

renderScene = ({ route, jumpTo }) => {
    switch (route.key) {
      case 'activity':
        return <ProfileActivity jumpTo={jumpTo} />;
      case 'circles':
        return <ProfileCircles jumpTo={jumpTo} />;
      case 'friends':
        return <ProfileFriends jumpTo={jumpTo} />;
      default:
        return null;
    }
  };

状态

  state = {
    index: 0,
    routes: [
      { key: 'activity', title: 'Activity' },
      { key: 'circles', title: 'Circles' },
      { key: 'friends', title: 'Friends' }
    ]
  };

Answer 1

您可以使用懒惰道具！如果要一次渲染所有选项卡，则应将false传递给懒惰道具，否则传递true。

请参阅文档
https://github.com/react-native-community/react-native-tab-view/blob/master/README.md

Answer 2

懒惰的道具在您点击另一个标签的旁边时有效，但是当您有很多带有道具 scrollEnabled 的标签并从第一个标签更改为最后一个标签时，它不适用于该场景.为了解决这个问题，我使用了这个逻辑，它也保证了这个场景并且一次最多渲染两个屏幕：

const renderScene = ({ route }) => {
    const shouldRenderRouteScreen = Math.abs(index - routes.indexOf(route)) < 2
    if (shouldRenderRouteScreen) {
      return <ScreenExample />;
    } else {
      return null;
    }
 }


   <TabView
      lazy
      navigationState={{ index, routes }}
      renderScene={renderScene}
      renderTabBar={(props) => (
         <TabBar {...props} scrollEnabled={true} />
      ...
  />

tabview仅在滑动时渲染组件吗？

2 个答案: