React-Native中createMaterialTopTabNavigator的高级使用
createMaterialTopTabNavigator作为react-native中重要的Tab组件，日常中使用频率很高，如果优雅的实现一些高级组件的功能，降低render刷新频率，事件方法绑定，我将与你一起讨论学习createMaterialTopTabNavigator的高级使用
- TabNavigator如何将数据传递给子组件
- TabNavigator如何与子组件直接方法传递
- TabNavigator子组件直接如何切换
- TabNavigator如何切入指定的Screen（界面）
简单的实现一个TabNavigator
目标：实现一个（可使用）和（不可使用）的tab，并显示可使用和不可使用的数量，如：可使用（10），不可使用（20）
TabNavigator.png
constructor(props) {
super(props)
this.state = {
used: '可使用',
unused: '不可使用',
isUnused: false, //指定界面是否是不可使用，默认可使用界面
unavailablePackageList: [], //不可使用list
availablePackageList: [], //可使用list
}
}
render() {
let unNumber = this.state.unavailablePackageList ? this.state.unavailablePackageList.length : '0'
let number = this.state.availablePackageList ? this.state.availablePackageList.length : '0'
const AppNavigator = createMaterialTopTabNavigator(
{
Used: {
screen: UseScreen,
navigationOptions: {
title: this.state.used + '(' + number + ')',
}
},
Unused: {
screen: UnusedScreen,
navigationOptions: {
title: this.state.unused + '(' + unNumber + ')',
}
},
}, {
tabBarPosition: 'top',
swipeEnabled: true,
lazy: false,
animationEnabled: true,
order: ['Used', 'Unused'],
initialRouteName: this.state.isUnused ? 'Unused' : 'Used',
tabBarOptions: {
showIcon: false,
style: {
backgroundColor: 'white',
elevation: 0,
borderBottomColor: Colors.timelineLightGrayColor,
borderBottomWidth: Dimens.dx_1,
},
activeTintColor: Colors.textCouponBlueColor,
inactiveTintColor: Colors.black,
indicatorStyle: {
backgroundColor: Colors.textCouponBlueColor,
height: Dimens.dx_8,
width: Dimens.dx_200,
marginLeft: (screenWidth / 2.0 - Dimens.dx_200) / 2.0
},
labelStyle: {
fontSize: Dimens.dx_46,
lineHeight: Dimens.dx_65,
}
}, )
const AppContainer = createAppContainer(AppNavigator)
return (
<AppContainer/>
)
}
毫无疑问，如果只是这么简单的功能，我们已经完成了，那么标题怎么能叫高级使用尼？那么问题来了
数据子组件如何使用的？事件子组件如何交互的？
defaultNavigationOptions: ({navigation}) => {
if (navigation.state.routeName === 'Unused') {
navigation.state.params = {
unavailablePackageList: this.state.unavailablePackageList,
exchangePackageIntegral: this.exchangePackageIntegral.bind(this),
selectOrderPackageUpdate: this.selectOrderPackageUpdate.bind(this)
}
} else {
navigation.state.params = {
availablePackageList: this.state.availablePackageList,
selectOrderPackageUpdate: this.selectOrderPackageUpdate.bind(this),
unUsePackageIntegral: this.unUsePackageIntegral.bind(this),
exchangePackageIntegral: this.exchangePackageIntegral.bind(this)
}
}
}
}
在tabOptions{}后，添加defaultNavigationOptions，将需要传递的数据，
如：不可用和可使用list存放在navigation.state.params里面，
包括事件绑定exchangePackageIntegral，如果用户选择了【去使用】，我们就可以在组件里去使用
selectOrderPackageUpdate(item) {
this.props.onSelected(item)
}
如何知道点击了（可使用）和（不可使用）tab的尼？
在对应子组件里调用navigationOptions
static navigationOptions = ({navigation}) => ({
tabBarOnPress: (event) => {
event.defaultHandler();
console.log('点击了Unused')
}
})
在对应子组件里获取数据
this.state.availablePackageList = this.props.navigation.state.params.availablePackageList;
在对应子组件里调用事件
可以有参数，可以无参数，就可以实现方法的回调了
this.props.navigation.state.params.selectOrderPackageUpdate(this.state.packageInfo)
子组件直接如何切换？
需求：用户在可用tab下兑换了一张不可用的券码，兑换成功后需要将所在可用界面跳转到不可用界面
直接执行
this.props.navigation.navigate('UnusedScreen')
如何切入指定的界面？
这个比较简单了，开始的时候设置好initialRouteName，根据isUnused来判断当前活动的界面
initialRouteName: this.state.isUnused ? 'Unused' : 'Used',
