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

###NavBar.js

import React, {Component,} from 'react'
import {
    StyleSheet,
    View,
    Animated,
    TouchableOpacity,
    TouchableNativeFeedback,
    Platform
} from 'react-native'
import px2dp from './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;
}

那么我们在调用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)}/>

在这里插入图片描述

js

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

css
 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后面的参数一致!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native中可以使用Image组件和ImageEditor组件来实现页面组件的黑白滤镜效果。以下是实现步骤: 1. 导入Image和ImageEditor组件: ```javascript import { Image, ImageEditor } from 'react-native'; ``` 2. 在组件中使用Image组件来渲染需要添加黑白滤镜的组件,并添加样式: ```javascript <Image source={require('./assets/image.jpg')} style={styles.image} /> ``` 其中,require('./assets/image.jpg')指定了需要添加黑白滤镜的组件的路径,styles.image定义了Image组件的样式: ```javascript const styles = StyleSheet.create({ image: { width: 200, height: 200, }, }); ``` 3. 使用ImageEditor组件组件进行黑白滤镜处理: ```javascript ImageEditor.cropImage(uri, { offset: { x: 0, y: 0 }, size: { width: screenWidth, height: screenHeight }, displaySize: { width: screenWidth, height: screenHeight }, resizeMode: 'contain', }, (croppedImageURI) => { ImageEditor.processImage(croppedImageURI, { width: screenWidth, height: screenHeight, resizeMode: 'contain', colorMatrix: [ 0.33, 0.33, 0.33, 0, 0, 0.33, 0.33, 0.33, 0, 0, 0.33, 0.33, 0.33, 0, 0, 0, 0, 0, 1, 0 ], }, (processedImageURI) => { this.setState({ processedImageURI }); }, (error) => console.error(error)); }, (error) => console.error(error)); ``` 其中,uri参数指定了需要添加黑白滤镜的组件的路径,colorMatrix参数指定了黑白滤镜的矩阵。处理完成后,将处理后的图片设置组件的state,并在render方法中使用Image组件来渲染处理后的图片: ```javascript render() { return ( <View style={styles.container}> <Image source={{ uri: this.state.processedImageURI }} style={styles.image} /> // 其他组件 </View> ); } ``` 注意,ImageEditor组件是异步执行的,因此需要使用回调函数来处理处理后的图片。详细使用方法可以查看React Native官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值