React Native 介绍

什么是React Native

React Native 是一个使用JS和React来编写原生IOS和Android移动应用的框架 官方口号是学习一次，到处编写

那么你一定要问了，它和直接使用js编写的h5页面或者混合应用有何区别呢？

使用React Native 编写的应用是真实的原生应用，而不是运行在浏览器环境下的web页面 因为React Native 所使用的基础ui组件和原生应用完全一致。你要做的就是把这些基础组件使用JavaScript和React方式组合起来。虽然我们使用的是JS来编写，但最终渲染出来的依然是原生组件。这也是React Native性能比h5页面或者混合应用性能好的原因。

React Native 基础

RN宽高

React Native中的尺寸都是无单位，表示的是与设备像素密度无关的逻辑像素点。

<View style={{ with: 50, height: 50 }} />

上面创建了一个View组件，它的宽高时50，那么无论在什么手机上，它的大小都是一样的。

宽高还可以使用百分比来设置：

<View style={{ with: '20%', height: 50 }} />

接下来是布局，通过布局来控制宽高，而不再通过width和height来指定宽高了。

RN布局

在React Native中使用flexbox规则来指定某个组件的子元素的布局，flexbox可以在不同屏幕尺寸上提供一致的布局结构。flex布局指的就是弹性盒子布局。

采用 Flexbox 布局的元素，我们可以称为容器，它的所有子元素自动成为容器成员，简称“项目”。

一般来说，使用flexDirection，alignItems和justifyContent三个样式属性就已经能满足大多数布局需求。

Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。就是决定子元素是水平排列还是垂直排列；默认是column，也就是垂直排列。

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

export default class FlexDirectionBasics extends Component {
    render() {
        return (
            <View style={{flexDirection: 'row'}}>
               <View style={{height: 50, width: 50, backgroundColor: blue}} />
               <View style={{height: 50, width: 50, backgroundColor: blue}} />
            </view>
        )
    }
}

Justify Content

在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。

对应的这些可选项有：

flex-start：从行首起始位置开始排列（默认值）
center：居中排列
flex-end：从行尾位置开始排列
space-around：均匀排列每个元素，每个元素周围分配相同的空间；
space-between：均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点；
space-evently：均匀排列每个元素，每个元素之间的间隔相等；

alignItems

alignItems决定了子元素在次轴方向的排列方式（此样式设置在父元素上）

对应的这些可选项有：

flex-start：元素向次轴起点对齐
center：元素在次轴居中
flex-end：元素向次轴终点对齐
stretch：弹性元素被在次轴方向被拉伸到与容器相同的高度与宽度（默认值）
baseline：所有元素向基线对齐。次轴起点到元素基线距离最大的元素将会于侧轴起点对齐已确定基线。

Flex

flex属性的作用是沿主轴的方向填充剩余的空间。这个空间将根据每个元素的flex属性进行划分。

Flex Wrap属性

默认情况下，项目都排在一条线（又称轴线）上。Flex Wrap属性定义，如果一条轴线排不下，如何换行？

它可能取三个值：

nowrap：默认不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

不同的是Text组件，在Text内部的元素不再使用flexbox布局，而是采用文本布局；这意味着<Text />内部的元素不再是一个个矩形，而可能会在行末换行。

// 一行
<Text>
    <Text>1<Text />
    <Text>2<Text />
</Text>
// 两行
<View>
    <Text>1<Text />
    <Text>2<Text />
</View>

RN之触摸事件

在html中，我们可以直接给div绑定一个点击事件，来响应用户的点击或者触摸的。但是在React Native的组件View组件虽然有一系列的触摸处理函数，但是想要监听到用户的操作是点击，还是不方便的。所以React Native提供了一系列的Touchable组件，专门用于处理点击事件。

比如：TouchableOpacity,TouchableNativeFeedback, TouchableHighlight等。

<TouchableOpacity>
  <Image 
     style={styles.button} 
     source={require('./myButton.png')} 
  />
</TouchableOpacity>

这些组件都可以监听到以下的事件：

onBlur: 失去焦点事件
onFocus：得到焦点事件
onLayout：当加载或者布局改变的事件
onLongPress：长按事件
onPress：触摸操作结束时调用，相当于点击
onPressIn：只要按下并调用了touchable元素，就会调用此方法，在onPress方法之前调用。最常用的方法无疑是onPress

滚动视图

在html中，如果页面内容超过了屏幕展示的高度，浏览器会自动出现滚动条。我们也可以直接给div设置一个固定的高度，再设置 overflow：scroll,就可以让div具有滚动效果。但是在React Native中，如果我们需要一个滚动效果，我们需要使用一个新的组件ScrollView或者FlatList。

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

export default class ScrollDemo extends Component {
    render() {
        return (
            <ScrollView style={{flexDirection: 'row'}}>
               <Text style={{fontSize: 80}} >React Native</Text>
               <Text style={{fontSize: 80}} >React Native</Text>
            </ScrollView>
        )
    }
}

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

export default class FlatListDemo extends Component {
    render() {
        return (
            <FlatList 
               data={[{key: 'a'}, {key: 'b'}]}
               rederItem={({item}) => <Text>{{item.key}}</Text>}
            />
        )
    }
}

FlatList组件不仅性能很好，还拥有很多其他的优点：

支持水平布局模式
行组件显示或隐藏时可配置回调事件
支持单独的头部组件
支持单独的尾部组件
支持自定义行间分割线
支持下拉刷新
支持上拉加载
支持跳转到指定行（ScrollToIndex）
支持多列布局

RN基础之网络请求

网络请求

在web项目中，我们离不开ajax。用来请求后端接口，刷新数据。那么在React Native中我们应该如何请求后台接口呢？ React Native官方封装了和web标准一致的Fetch API，也内置了XMLHttpRequest API（也就是俗称ajax），甚至还支持WebSocket。

  function getMoviesFromApiAsync() {
     return fetch('https://facebook.github.io/react-native/movies.json') 
        .then((response) => response.json())
        .then((responseJson) => {
            return responseJson.movies;
        })
        .catch((error) => {
           console.error(error);
        })
  }

thanks...

React-Native 基础知识入门一篇足够