一、this[index]
// 切换事件
tabChanged = (obj) => {
this.tab = tabs[obj.i]
const { index } = this.tab
if (this[index]) {
this[index].onRefresh('')
}
}
// 渲染每一个切换列表
renderPage = item => (
<CarConditionMarketPage
ref={ref => this[item.index] = ref}
key={item.index}
tabLabel={item.name}
type={item.type}
router={this.props.router}
/>
)
上面代码相当于给this对象增加了一个匿名数组：
等价于：
this.arrayPages[item.index] = ref
if(this.arrayPages[index] ){
this.arrayPages[index].onRefresh('')
}
二、切换控件【ScrollableTabView】
[React Native]react-native-scrollable-tab-view(入门篇)
https://www.jianshu.com/p/b7788c3d106e
{/* 切换控件 */}
<ScrollableTabView
initialPage={0}
locked
renderTabBar={() => <DefaultTabBar />}
onChangeTab={obj => this.tabChanged(obj)}
tabBarBackgroundColor="white"
tabBarActiveTextColor="#3C86FF"
tabBarInactiveTextColor="#888888"
tabBarUnderlineStyle={{ height: 1, backgroundColor: '#3C86FF' }}
>
{
tabs.map(item => this.renderPage(item))
}
</ScrollableTabView>
组件可以增加任何属性，比如：下面的tabLabel属性；ScrollableTabView就是利用这个原理，检测每个子视图是否包含tabLabel属性，进行显示tab的title信息。
ScrollableTabView中每个被包含的子视图需要使用tabLabel属性，表示对应Tab显示的文字
DefaultTabBar：Tab会平分在水平方向的空间
// 渲染每一个切换列表
renderPage = item => (
<CarConditionMarketPage
ref={ref => this[item.index] = ref}
key={item.index}
tabLabel={item.name}
type={item.type}
router={this.props.router}
/>
)
