React-Native中createMaterialTopTabNavigator的高级使用

React-Native中createMaterialTopTabNavigator的高级使用

createMaterialTopTabNavigator作为react-native中重要的Tab组件，日常中使用频率很高，如果优雅的实现一些高级组件的功能，降低render刷新频率，事件方法绑定，我将与你一起讨论学习createMaterialTopTabNavigator的高级使用

1. TabNavigator如何将数据传递给子组件
2. TabNavigator如何与子组件直接方法传递
3. TabNavigator子组件直接如何切换
4. 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 (
            
        )
    }
        

毫无疑问，如果只是这么简单的功能，我们已经完成了，那么标题怎么能叫高级使用尼？那么问题来了

数据子组件如何使用的？事件子组件如何交互的？

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',