React Native探索之组件的属性和状态

前言

在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性、样式等等。同样的,React Native中的组件也有属性、样式和状态。

1.Props(属性)

组件创建时会设置一些参数来定制这个组件,这些参数就是属性,属性一旦设定,在组件的生命周期中就不会改变。下面拿Image的source属性和Text的onPress属性作为举例。

Image的source属性

import React, {Component} from 'react';
import {AppRegistry, Image} from 'react-native';
class ImageSourceApp extends Component {
    render() {
        let pic = {
            uri: 'http://olwwjaqhc.bkt.clouddn.com/gongzhong.jpg'
        };
        return (
            <Image source={pic} style={{width: 200, height: 200}}/>//1
        );
    }
}
AppRegistry.registerComponent('firstProject', () => ImageSourceApp);

在注释1处用Image的source属性来指定要显示的图片的地址,{}中可以放一个js变量或表达式,需要执行后取值,这里将图片的地址pic放到{}中。紧接着用style属性来设置图片大小,关于style属性,后面会介绍它。运行效果如下图所示。

Text的onPress属性

接着拿我们熟悉的Text来做举例,如下所示。

import React, {Component} from 'react';
import {AppRegistry, Text, Alert} from 'react-native';
class TextPressApp extends Component {
    render() {
        return (
            <Text onPress={onTextPress}>点击文本</Text>//1
        );
    }
}
const onTextPress = () => {
    Alert.alert('弹出框');
};
AppRegistry.registerComponent('firstProject', () =>  TextPressApp);

注释1处的onPress就是Text的属性,除了onPress,Text还有很多其他的属性,比如numberOfLines、onLayout和style等等。{}放入了onTextPress函数,它是一个箭头函数,作用就是return一个Alert,它等价于如下代码:

function onTextPress() {
    return Alert.alert('弹出框');
};

好了我们运行程序,当我们点击Text组件时会弹出Alert,如下图所示。

style属性

在React Native中所有的核心组件都接受名为style的属性,用来定于组件的样式,我们将上面的Text示例代码中加入style属性,如下所示。

...
class TextPressApp extends Component {
    render() {
        return (
            <Text style={{color: 'blue'}} onPress={onTextPress}>点击文本</Text>
        );
    }
}
...

再运行程序,就会发现"点击文本"变为蓝色了。在实际开发中,style属性会变得越来越复杂,因此我们可以使用StyleSheet.create来集中定义组件的样式。

import React, {Component} from 'react';
import {AppRegistry, Text, Alert, StyleSheet, View} from 'react-native';
class TextPressApp extends Component {
    render() {
        return (
            <View>//2
                <Text style={styles.largeblue} onPress={onTextPress}>点击文本</Text>
                <Text style={styles.green}> 第二行</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({//1
    largeblue: {
        color: 'blue',
        fontSize: 28,
        fontWeight: 'bold',
    },
    green: {
        color: 'green',
        fontSize: 18,
    },
});
const onTextPress = () => {
    Alert.alert('弹出框');
};
AppRegistry.registerComponent('firstProject', () => TextPressApp);

在注释1处通过StyleSheet.create创建了一个样式表,我们在Text中使用样式表就可以了。在注释2处用到了view组件,它是一个基础组件支持Flexbox布局、样式和一些触摸处理等,可以放到其他视图里也可以包含子视图。View组件在Android、iOS和Web中,分别对应View、UIView和<div>。 我们运行程序,效果如下图所示。

2.State(状态)

组件的属性设置完毕后,在组件的生命周期中就不会改变,如果想要改变属性,我们可以使用State,例子如下。

import React, {Component} from 'react';
import {AppRegistry, Text, View} from 'react-native';
class Flash extends Component {
    constructor(props) {//1
        super(props);
        this.state = {showText: true};//2
        setInterval(() => {
            this.setState({showText: !this.state.showText});
        }, 1000);//3
    }
    render() {
        let display = this.state.showText ? this.props.text : '';//4
        return (
            <Text style={{color: 'blue'}}>{display}</Text>
        );
    }
}
class FlashApp extends Component {
    render() {
        return (
            <View style={{alignItems: 'center'}}>
                <Flash text='蓝色闪光'/>//5
            </View>
        );
    }
}
AppRegistry.registerComponent('firstProject', () => FlashApp);

我们自定义了Flash组件,在注释1处定义了constructor构造方法,注释2处做了初始化state的工作,默认showText的值为true。注释3处调用setInterval方法,每隔1000毫秒对showText的值进行取反,使得showText的值不断在true和false之间切换。注释4处通过showText的值来控制文本的显示,如果showText为true,则通过this.props.text来获取Flash组件的text属性的值。最后在注释5处使用我们自定义的Flash组件,将text作为Flash组件的属性并设值。运行效果如下所示。

原文发布于微信公众号 - 刘望舒(liuwangshuAndroid)

原文发表时间:2018-10-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信小开发

五分钟掌握微信小程序轮播图

从公共库v1.4.0开始,change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下: autoplay 自动播放导致 swip...

2286
来自专栏前端小叙

vue父组件中获取子组件中的数据

<FormItem label="上传头像" prop="image"> <uploadImg :width="150"...

1.4K10
来自专栏木头编程 - moTzxx

wx.navigateTo 跳转页面失败?

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

3601
来自专栏Google Dart

AngularDart Material Design 记分卡 顶

(adsbygoogle = window.adsbygoogle || []).push({}); fun...

1384
来自专栏ShaoYL

键盘工具栏的快速集成--IQKeyboardManager

36014
来自专栏ShaoYL

键盘工具栏的快速集成--IQKeyboardManager

41311
来自专栏Windows Community

Windows 8.1 应用再出发 (WinJS) - 几种新增控件(2)

上篇我们介绍了Windows 8.1 和 WinJS 中新增控件中的 AppBarCommand、BackButton、Hub、ItemContainer,本篇...

3236
来自专栏京东技术

Vue拖拽组件开发实例

vue是一套用于构建用户界面的渐进式框架。可以用他来封装单文件组件来开发更为复杂的单页应用。 本文主要是通过封装一个拖拽组件的例子,来分析Vue组件化相关知识。

86613
来自专栏刘望舒

React Native入门(三)组件的Props(属性)和State(状态)

前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性、样式等等。同样的,React Native中的组件也有属性、样式和状态。 1...

19510
来自专栏Alice

iOS textfield实现一行的数字限制,超出进行弹框

步骤一:添加textfield协议‘ @interface LsGeXingQianMingVC ()<UITextFieldDelegate>  步骤2:设置...

2167

扫码关注云+社区

领取腾讯云代金券