首页 > 解决方案 > does the tabview renders components on swipe only?

问题描述

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' }
    ]
  };

标签: javascriptreact-nativereact-navigationreact-native-tab-view

解决方案


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

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


推荐阅读