React Native基础与入门（二）--初识React Native

React Native组件

React Native是用React Native框架来组建Android和IOS App的技术，那么React Native组件就是React组件。React组件让你将UI分割成独立的、可重用的一些碎片或部分，这些部分都是相互独立的。

创建组件的三种方式

1.ES6创建组件的方式

export default class HelloComponent extends Component {
    render() {
        return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello,{this.props.name}</Text>
    }
}

2.ES5创建组件的方式

var HelloComponent = React.createClass({
    render () {
        return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text>
    }
})

//导出
module.exports = HelloComponent;

3.函数式定义的无状态组件

/**
 * 方式三：函数式
 * 无状态，不能使用this
 */
function HelloComponent(props) {
    return <Text style={{fontSize:20,{props.name}</Text>
}

module.exports = HelloComponent

组件的生命周期

如图，可以把组件的生命分为三个阶段

第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化

第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面

第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作

第一阶段(除render方法外)和第三阶段，所有的方法都是一次性调用(只会调用一次)，第二阶段里面的所有方法会多次被调用。

导入与导出

导出组件

ES6：export defalut

ES5: module.exports = 组件名

导入组件

import

上面创建组建的时候有提到过，可以参考。

导出变量和常量

/**
 *导出一个变量
 */
export var name = '小明'
var age = '22'
/**
 *导出常量
 */
const sex = '男'

/**
 * 批量导出
 */
export {name,age}

导入变量

import 组件名，{导入的变量或者方法名} from ...

import ImportExportComponent,{name,age} from './importExportComponent'

导出方法
export function sum(a,b)

导入方法

import ImportExportComponent,age,sum} from './importExportComponent'

React Native的props使用详解

props是父组件传递给子组件，或者是本组件定义的默认默认属性。props是只读的，无法修改。

定义默认属性

static defaultProps = {
        name:'Jackie'
    }

属性检查机制

static propTypes = {
        name:PropTypes.string,//name必须为string类型
        age:PropTypes.number,//age必须为数字类型
        sex:PropTypes.string.isrequired,//性别必须传递
    }

查看源码，属性检查机制支持的类型如下：

var ReactPropTypes = {
  array: createPrimitiveTypeChecker('array'),bool: createPrimitiveTypeChecker('boolean'),func: createPrimitiveTypeChecker('function'),number: createPrimitiveTypeChecker('number'),object: createPrimitiveTypeChecker('object'),string: createPrimitiveTypeChecker('string'),symbol: createPrimitiveTypeChecker('symbol'),any: createAnyTypeChecker(),arrayOf: createArrayOfTypeChecker,element: createElementTypeChecker(),instanceOf: createInstanceTypeChecker,node: createNodeChecker(),objectOf: createObjectOfTypeChecker,oneOf: createEnumTypeChecker,oneOfType: createUnionTypeChecker,shape: createShapeTypeChecker
};

延展操作符和结构赋值

export default class setup extends Component {
    render() {
        var params = {name:'小张',age:18,sex:'男'};
        //取出部分属性
        var {name,sex} = params;
        return (
            <View style={styles.container}>
                <HelloComponent
                    //name="Jackie"
                    //ES6延展操作符
                    {...params}
                    //ES6结构赋值，可以从一组属性中获取指定属性
                    name={name}
                    sex={sex}
                />

                <Text style={{fontSize:20}}>名字:{name}</Text>
                <Text style={{fontSize:20}}>年龄:{age}</Text>
            </View>
    );
    }

state

因为上面提到的props是只读的，无法改变，为了实现交互，我们用到了state。我们可以把组件看成一个状态机，UI看成各种状态，并在各种状态之间进行切换，只需要改变state，React Native就会重新渲染UI。

ref

ref可以看作是组件渲染后指向组件的一个引用，通过ref可以获取真实的组件。

类

对熟悉Java，object-c，C#等纯面向对象的开发者来说，都会对class有一种特殊的情怀，ES6中引入了class(类)，让JavaScript的面向对象编程变得更加简单和容易理解。

Student.js

/**
 * Created by jie.cheng on 2017/3/7.
 */
export default class Student {
    constructor(name,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    toString() {
        return "姓名：" + this.name + " 年龄：" + this.age + " 性别：" + this.sex;
    }
}

使用：

export default class setup extends Component {
    constructor(props) {
        super(props)
        this.student = new Student("小刚",16,"男");
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={{fontSize:20}}>{this.student.toString()}</Text>
            </View>
    );
    }
}

React Native布局知识

React Native中的布局方式FlexBox。FlexBox是CSS3弹性框布局规范，目前还处于最终征求意见稿 (Last Call Working Draft)阶段，并不是所有的浏览器都支持FlexBox。但大家在做React Native开发时大可不必担心FlexBox的兼容性问题，因为既然React Native选择用FlexBox布局，那么React Native对FlexBox的支持自然会做的很好。

宽和高

在学习FlexBox之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸，也就是大小。

像素无关

在React Native中尺寸是没有单位的，它代表了设备独立像素。

<View style={ {width:100,height:100Box-sizing: border-Box; color: rgb(166,margin:40Box-sizing: border-Box; color: rgb(166,backgroundColor:'gray'}}> <Text style={fontSize:16Box-sizing: border-Box; color: rgb(166,margin:20}}>尺寸</Text> </View>

上述代码，运行在Android上时，View的长和宽被解释成：100dp 100dp单位是dp，字体被解释成16sp 单位是sp，运行在iOS上时尺寸单位被解释称了pt，这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变。

React Native按钮

在做App开发过程中离不了的需要用户交互，说到交互，我们首先会想到的就是按钮了，在React Native中没有专门的按钮组件。为了能让视图能够响应用的的点击事件，我们需要借助Touchablexxx组件，来包裹我们的视图。为什么说是Touchablexxx呢，因为它不只是一个组件，而是一组组件，一下四个组件都可以用来包裹视图来响应用户的点击事件。

TouchableWithoutFeedback：响应用户的点击事件，如果你想在处理点击事件的同时不显示任何视觉反馈，使用它是个不错的选择。

TouchableHighlight：在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。

TouchableOpacity：相比TouchableHighlight在按下去会使背景变暗的效果，TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。

TouchableNativeFeedback：在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似水波纹的视觉效果。注意，此组件只支持Android。

React Native图片加载技巧

使用本地静态图片

可以不指定大小，默认是图片的大小

render() {
        return <View>
            <image
                source={require('./qiqiu.png')}
            />
        </View>
    }

也可以指定大小

render() {
        return <View>
            <image
                style={{width:500,height:100,borderWidth:1}}
                source={require('./qiqiu.png')}
            />
        </View>
    }

使用网络图片

render() {
        return <View>
            <image
                style={{width:500,borderWidth:1}}
                source={{uri:'图片地址'}}
            />
        </View>
    }

注意，加载网络图片时，一定要指定图片的宽和高，不然，网络图片无法渲染。
使用原生图片资源

render() {
        return <View>
            <image
                style={{width:500,tintColor:'red'}}
                source={{uri:'图片的名称'}}
            />
        </View>
    }

注意

①tintColor表示给图片着色，加载本地资源图片，也一定要指定图片的宽和高

②对于Android来说，只能加载drawable目录下的图片，mipmap下面的图片无法加载

③由于用到了项目中的图片，所以必须重新安装应用，不能直接刷新

React Native基础与入门（二）--初识React Native

猜你在找的React相关文章