我一直在使用此插件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}
/>
)
}
}