React Native:只呈现一次选项卡视图

ttvkxqim  于 2023-04-12  发布在  React
关注(0)|答案(1)|浏览(117)

我一直在使用这个插件react-native-tab-view和我的情况下,我有5个路由,但都使用相同的组件,所以它呈现五次组件,也有一个API调用,我有内部的组件,其发射5 times.So我的问题是,如果有一种方法来渲染只有标签,我选择除了iam使用相同的组件,这是我的代码:

const FirstRoute = () => (
  <View>
    <PostsList />
  </View>
);

const initialLayout = {
  height: 0,
  width: Dimensions.get('window').width,
};

class Home extends Component {
  constructor() {
    super();
    this.state = {
      isData: true,
      index: 0,
      routes: [
        { key: 'first', title: 'Todos' },
        { key: 'second', title: 'Encontrados' },
        { key: 'third', title: 'Perdidos' },
        { key: 'four', title: 'Adopción' },
        { key: 'five', title: 'Seguidos' },
      ]
    };

  }

  _renderTabBar = props => (
    <TabBar
      {...props}
      scrollEnabled
      indicatorStyle={styles.indicator}
      style={styles.tabbar}
      tabStyle={styles.tab}
      labelStyle={styles.label}
    />
  );

  _renderScene = SceneMap({
    first: FirstRoute,
    second: FirstRoute,
    third: FirstRoute,
    four: FirstRoute,
    five: FirstRoute
  })

  _handleIndexChange = index => {
    this.props.selected_tab(index);
    this.setState({
      index,
    });
  }

  render() {
    return (

      <TabView
        navigationState={this.state}
        renderTabBar={this._renderTabBar}
        renderScene={this._renderScene}
        onIndexChange={this._handleIndexChange}
        initialLayout={initialLayout}
      />
    )
  }
}

相关问题