React Native:仅渲染一次标签视图

时间:2018-06-23 23:28:58

标签: reactjs react-native

我一直在使用此插件react-native-tab-view,对于我来说,我有5条路由,但都使用相同的组件,因此其呈现的分量是该组件的五倍,并且还具有我在其触发的组件内进行的api调用5次。所以我的问题是,是否有一种方法可以使用相同的组件仅渲染除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}
      />
    )
  }
}

0 个答案:

没有答案