React Native组件学习之设置动态参数

众所周知，React Native的一个重要的特点是它的组件化，也就是可以将屏幕中一个个View当成一个个组件提取出来，然后自由搭配使用。这对于UI界面的设计提供了很大的便利。

话不多说，直接上效果：

界面1 界面2
这是个自定义的顶部标题栏，当然我们也可以使用react-navigation（本次案例项目使用的导航库是react-navigation，具体使用可以参考☜☜的链接）自带的顶部标题栏。但是，但是来了，react-navigation默认的导航栏不利于做沉浸式状态栏，这个以后再讲，另外一方面，样式跟属性定义的自由度也远没有我们自己封装的好。所以，这里主要就是要对这个顶部导航栏的组件进行封装，以适应我们在不同页面的需求，也就是需要设置动态的参数以便于我们在调用时传进来。

首先

把组件提取出来先，命名为NavBar，该组件接收6个参数：title、leftIcon、rightIcon、leftPress、rightPress、style。

import React, {Component,} from 'react'
import {
    StyleSheet,View,Animated,TouchableOpacity,TouchableNativeFeedback,Platform
} from 'react-native'
import px2dp from '../utils/px2dp'
import Icon from 'react-native-vector-icons/Ionicons'

const PropTypes = require('prop-types');
export default class NavBar extends Component {
    static propTypes = {    //接收以下六个参数：
        title: PropTypes.string,       //标题
        leftIcon: PropTypes.string,    //左边图标
        rightIcon: PropTypes.string,   //右边图标
        leftPress: PropTypes.func,     //左边点击事件方法
        rightPress: PropTypes.func,    //右边点击事件方法
        style: PropTypes.object        //style样式
    }
    static topbarHeight = (Platform.OS === 'ios' ? 64 : 42)

    renderBtn(pos) {
        let render = (obj) => {
            const {name, onPress} = obj;
            if (Platform.OS === 'android') {
                return (
                    <TouchableNativeFeedback onPress={onPress} style={styles.btn}>
                        <Icon name={name} size={px2dp(26)} color="#fff"/>
                    </TouchableNativeFeedback>
                )
            } else {
                return (
                    <TouchableOpacity onPress={onPress} style={styles.btn}>
                        <Icon name={name} size={px2dp(26)} color="#fff"/>
                    </TouchableOpacity>
                )
            }
        }
        if (pos == "left") {
            if (this.props.leftIcon) {
                return render({
                    name: this.props.leftIcon,
                    onPress: this.props.leftPress
                })
            } else {
                return (<View style={styles.btn}></View>)
            }
        } else if (pos == "right") {
            if (this.props.rightIcon) {
                return render({
                    name: this.props.rightIcon,
                    onPress: this.props.rightPress
                })
            } else {
                return (<View style={styles.btn}></View>)
            }
        }
    }

    render() {
        return (
            <View style={[styles.topbar, this.props.style]}>
                {this.renderBtn("left")}
                <Animated.Text numberOfLines={1}
                               style={[styles.title, this.props.titleStyle]}>{this.props.title}</Animated.Text>
                {this.renderBtn("right")}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    topbar: {
        height: NavBar.topbarHeight,
        backgroundColor: "#1E82D2",
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingTop: (Platform.OS === 'ios') ? 20 : 0,
        paddingHorizontal: px2dp(10)
    },
    btn: {
        width: 40,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center'
    },
    title: {
        color: "#fff",
        fontWeight: "bold",
        fontSize: px2dp(16),
        marginLeft: px2dp(5),
    }
});

附上px2dp.js：

import {Dimensions} from 'react-native'

const deviceW = Dimensions.get('window').width
const basePx = 375

export default function px2dp(px) {
    return px * deviceW / basePx;
}

接着

接下来就是调用组件了，首先明白需求，要做个什么样式的标题栏，比如像上面界面1所示，我们需要这样的标题栏：

我的

那么我们在调用NavBar组件时只需要传入title、leftIcon、leftPress、rightIcon和rightPress就可以了：

 <NavBar
          title="我的"
          leftIcon="ios-notifications-outline"
          leftPress={this.leftPress.bind(this)}
          rightIcon="ios-settings-outline"
          rightPress={this.rightPress.bind(this)}/>

在这里不用传入样式style属性，用的是NavBar的默认style，也就是还没用到组件的动态参数传递。在此我们要注意一个点，就是在NavBar定义style时用了：

style={[styles.topbar, this.props.style]} ...
style={[styles.title, this.props.titleStyle]}

这种style数组的形式，默认会从右到左拿style，如果右边的style有值就用右边的，没有就用默认的。注意this.props后面的参数，我们接下来就根据这个变量做动态参数的传递。
根据界面2，我们现在要做的标题栏是这样的：

新闻

  <NavBar
           title="新闻"
           titleStyle={styles.titleStyle}
           style={styles.style}/>

 style: {
        height: NavBar.topbarHeight,
        backgroundColor: "#fff",
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingTop: (Platform.OS === 'ios') ? 20 : 0,
        paddingHorizontal: px2dp(10)
    },
    titleStyle: {
        fontSize: 16,
        color: '#000',
        fontWeight: "bold",
    }

注意style的命名一定要跟上面this.props后面的参数一致！

其他参数如果不需要就不用传啦。