1

The screen i am working on needs some tab navigation . its working great but there is one problem. It renders the component on swipe only when i press on the tab i want to go to . it does not do anything. Ex: I am on tab number 3 and i want to go to tab 1. If i click on tab 1 , nothing happens . i have to swipe to it passing tab 2 in the process . I don't want that . Here's my code.

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

render scene function

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

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

2 回答 2

0

你可以使用惰性道具！如果你想一次渲染所有选项卡，那么你应该将 false 传递给惰性属性，否则传递 true。

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

于 2019-07-29T13:11:25.397 回答
0

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} />
      ...
  />
于 2021-05-05T15:20:24.920 回答