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

相关文章

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组件的属性并设值。运行效果如下所示。

参考资料

React Native官方文档

React Native中文网



欢迎关注我的微信公众号,第一时间获得博客更新提醒,以及更多成体系的Android相关原创技术干货。

扫一扫下方二维码或者长按识别二维码,即可关注。

时间: 2024-10-12 18:11:08

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

组件的props属性和state状态

props属性: 我使用代码来说明React中props属性: // Profile.jsx import React from 'react' ; export default Class Profile extends React.Component { // render 是这个组件渲染的Vitrual DOM结构 render() { return ( <div className-"profile-component"> </*this.props就是传入的

创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `function`的形式在创建,并且该组件是无state状态的.具体的创建形式如下 1 import React from 'react '; 2 3 //定义一个React组件 4 function App() { 5 return ( 6 <div> 7 hello React... 8 </div

React Native入门-刘望舒

React Native入门(一)环境搭建与Hello World React Native入门(二)Atom+Nuclide安装.配置与调试 React Native入门(三)组件的Props(属性)和State(状态)

React Native 入门宝典

声明:该书的笔者为徐嬴老师,一名具有5年IOS开发经验,和两年RN开发经验的老司机. 原文可以在gitbook上找到 笔者只是为他的书中提的的一些列问题,进行有偿答疑. 有偿答疑.本书将持续保持更新,有关问题可以加群讨论. 正在上传...取消 简介 笔者在研究ReactNative过程中,发现其中文资料相对较少,已出版的大部分图书资料都已过时.Facebook中的ReactNative开发团队以每月更新一版的速度在向前推进版本. 为更好的让广大开发者快速入门ReactNative,笔者结合自身开

React Native 入门基础知识总结

中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看看阮一峰老师的<ECMAScript 6 入门>这篇文章.里面涉及很多 ES6 的新特性.我之前也是看了阮老师的文章做了一些学习笔记 ES6 学习笔记. 1.环境搭建 环境搭建中文教程,点击跳转RN中文社区 :http://reactnative.cn/docs/0.40/getting-star

React Native常用第三方组件汇总--史上最全 之一

把我认为最好的知识,拿来与他人分享,是这一生快事之一! React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-image-picker 图片选择器 reac

React Native入门(二)Atom+Nuclide安装、配置与调试

相关文章 React Native入门 前言 上一篇文章我们搭建了开发环境,并写了个Hello World.这一节我们来学习React Native的开发IDE:Atom+Nuclide的安装.配置与调试.本文所讲的内容只适用于Mac平台. 1.开发IDE选择 React Native的开发IDE有很多种,比如FaceBook 官方推荐的 Atom+Nuclide.Android Studio的同门WebStorm(收费).Sublime Text 3.Visual Studio Code和De

React Native返回刷新页面(this.props.navigation.goBack())

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Button } from 'react-native'; export default class HomeScreen extends Component { constructor(props){ super(props); } static navigationOptions = { title: '首页', };

react native 中View组件中的ref属性是什么

在用Reactnative写工程时,默认奇妙的有一种像OC中,或者Java 中或者当前类的私有属性的想法,state 和props都不能满足时,就是ref   它能达到其他语言中持有一个view组件,并且局部的刷新 ref 接受值为string类型的参数或者一个函数function callback.这一特性让开发者对ref的使用更加灵活. render() { return <TextInput ref={(c) => this._input = c} />; }, component