React Native v0.55 学习笔记1

最新推荐文章于 2019-08-09 15:22:00 发布

nnnnrx

最新推荐文章于 2019-08-09 15:22:00 发布

阅读量853

点赞数

本文链接：https://blog.csdn.net/u012123160/article/details/80550026

版权

本文是React Native v0.55的学习笔记，涵盖了Hello World、Props、State、Style、宽高和基本布局FlexBox等内容。介绍了RN如何基于React的思想结合原生平台组件进行开发，讲解了组件、Props和State的概念，以及如何使用FlexBox进行灵活布局。

摘要由CSDN通过智能技术生成

React Native v0.55 学习笔记1

学习内容来自官网文档0.55版本

RN 是基于 React 的思想，相比于 web 的一些组件，RN 使用的是基于原生（ android、ios ）的组件。所以想用 RN 开发应用的话，就需要了解一些 React 方面的概念。例如 JSX，component，state 和 props。

Hello World

RN 使用的是 JavaScript ，支持 ES6 的语法，官方文档中的示例大量使用了 ES6 的新特性。
在 UI 方面则是主要使用 JSX ——一种可以在 XML 标签中包裹 js 语句的语法。RN 内置很多标签，也支持自定义标签。
Component 一个完整的应用必然是由许多个 component 组成的。一个 component 可以非常的简单，唯一需要做的事情就是实现 render函数，这个函数用来返回 JSX 用以渲染 UI.

Props

大多数的 component 都会通过不同的参数来实现自定义的不同功能，这些参数就被称为 props

例如 RN 中的 Image标签，其中 source这个属性就是用来控制图片源的。

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

export default class Bananas extends Component {
   
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={
  {width: 193, height: 110}}/>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => Bananas);

JSX 语法中，标签内部，使用一对花括号{}内容可以是 js 的表达式。
使用 this.props在自定义的component的render方法中可以获取外部传入的参数，见下面的代码块。
下面的例子中，使用到了自定义component，在 JSX 中像内置的标签一样使用。
View是一个非常常用容器标签，也是最基本的 UI 控件之一，支持flexbox布局、style、触摸事件处理以及无障碍功能处理。

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
   
  render() {
    return (
      <Text>Hello {
  this.props.name}!</Text>
    );
  }
}

export default class LotsOfGreetings extends Component {
   
  render() {
    return (
      <View style={
  {alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);

State

props和state是控制component的两种数据类型。前者由父类或者外部传入，在整个控件的生命周期中是固定不变的；后者则是用于一些有变化的数据

通常来说，在constructor方法中初始化state。
通常来说，使用this.setState()方法来改变state的值。

import React,{Component} from 'react';
import {Text,Image,View} from 'react-native';

class Greeting extends Component{
   
  constructor(props){
    super(props);
    this.state = {isShowingText:true};
    setInterval(()=>{
      this.setState(previousState=>{
        return { isShowingText: !previousState.isShowingText };
      })
    },1000);
  }
  render() {
    let disPlay = this.state.isShowingText ? this.props.name : ' ';
      return (
          <Text style={
  {color: