Web开发 | React-Navite 介绍 & 使用总结 (九)

介绍

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

React.js介绍

RN环境搭建:

1.配置RN基本开发环境

这两篇文档对比着进行参考，进行相关的安装；

搭建基本的开发环境 - 英文官网
搭建基本的开发环境 - 中文

2.创建项目

终端指令

react-native init AwesomeProject

3.编译并运行 React Native 应用

终端指令

cd AwesomeProject
react-native run-ios

4. 热加载

通过⌘-R可以刷新 APP 并看到你的最新修改！如果没有反应，请检查模拟器的 Hardware 菜单中，connect hardware keyboard 选项是否选中开启）

RN初识-Hello,world

import React, { Component } from 'react';
import { Text, View } from 'react-native'
export default class App extends Component {
    render() {
        return (
            
                 hello,world! 
            
        )
    }
}

import、from、class、extends、以及() =>箭头函数等新语法都是 ES2015 中的特性。可以看看阮一峰老师的书，了解语法特性。

Hello world!这叫做 JSX——是一种在 JavaScript 中嵌入 XML 结构的语法.

View可以看做是的UIView, Text可以当做是 Label

核心概念

1. Component 组件

组件允许你将 UI 拆分为独立可复用的代码片段, 组件作为RN的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是RN应用程序的基石。

hello,world实例代码定义了一个名为App的新的组件（Component）。你在编写React Native应用时，肯定会写出很多新的组件。而一个App的最终界面，其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的JSX语句。

2. Props（属性）

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。

props 就是父控件传入进来得参数集合,通过 props 可以展示父控件传进来得数据

// props 使用
import React, { Component } from 'react'
import { Text, View } from 'react-native'

// 组件一
class Welcome extends Component {
    render() {
        return (
            
                {/* 通过  this.props.msg 获取外部传入的数据*/}
                 {this.props.msg} 
            
        )
    }
}

// 组件二
export default class App extends Component {
    render() {
        return (
           
               {/* 给 Welcome组件传入数据*/}
               
           
        )
    }
}

3. State（状态）

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。

state 需要在构造器(constructor)中进行初始化, state 只能在自己组件内使用,可以通过setState方法修改state的值.

state 可以理解为自己组件内的私有属性集合,只能自己使用修改,外部无法访问

//state (状态)
import React, { Component } from 'react'
import { Text, View } from 'react-native'

// 定义一个时钟组件

export default class Clock extends Component {
    constructor(props) {
        super(props)
        //  state内部存储一个 date 属性,只能在组件内访问和使用
        this.state = {
            date: new Date()
        }
    }

    // 开启一个定时器,1秒执行一次
    componentDidMount() {
        this.timeId = setInterval(() => this.tick(), 1000)
    }

    // 每一秒修改state 的 date 的值
    tick() {
        this.setState({
            date: new Date()
        })
    }

    render() {
        return (
            
                {/* 展示 state状态  date 属性的值 */}
                 time: {this.state.date.toLocaleTimeString()} 
            
        )
    }
}

4. 样式

在React Native中,所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了web上的CSS的命名,只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor

style属性可以是一个普通的JavaScript对象。这是最简单的用法

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

export default class App extends React.Component {
    render() {
        return (
            
                hello,world
            
        )
    }
}

实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。

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

export default class App extends Component {
    render() {
        return (
            
                just red
                just bigblue
                bigblue, then red
                red, then bigblue
            
        );
    }
}

const styles = StyleSheet.create({
    bigblue: {
        color: 'blue',
        fontWeight: 'bold',
        fontSize: 30,
    },

    red: {
        color: 'red',
    },
});

5.高度与宽度

组件的高度和宽度决定了其在屏幕上显示的尺寸。

5.1 指定宽高

最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

RN组件在界面上布局方式,默认是自上而下来进行布局的


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

export default class App extends Component {
  render() {
    return (
      
        
        
        
      
    );
  }
};

运行效果:

image.png

5.2 弹性（Flex）宽高

在组件样式中使用 flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。

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

export default class App extends Component {
  render() {
    return (
      
        
        
        
      
    );
  }
};

注: 组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

6. Flexbox布局

React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。

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

6.1 Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

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

export default class App extends Component {
    render() {
        return (
            
                
                
                
            
        )
    }
}

效果

image.png

6.2 Justify Content

在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around、space-between以及space-evenly。

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

export default class App extends Component {
    render() {
        return (
            
                
                
                
            
        )
    }
}

效果:

image.png

6.3 Align Items

在组件的 style 中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

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

export default class App extends Component {
    render() {
        return (
            
                
                
                
            
        )
    }
}

效果:

image.png

7. 处理文本输入

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

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            text: ''
        }
    }
    render() {
        return (
            
                 { this.setState({ text }) }}
                />

                {this.state.text}
            
        )
    }
}

效果:

image.png

8. 处理触摸事件

移动应用上的用户交互基本靠“触摸”。当然，“触摸”也是有各种姿势的：在一个按钮上点击，在一个列表上滑动，或是在一个地图上缩放。React Native 提供了可以处理常见触摸手势（例如点击或滑动）的组件，以及可用于识别更复杂的手势的完整的手势响应系统。

8.1 显示一个简单的按钮

import React, { Component } from 'react'
import { View, Button, Alert } from 'react-native'

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            text: ''
        }
    }
    render() {
        return (

效果:

image.png

9.使用滚动视图

ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView 不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）。

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

export default class App extends Component {
    render() {
        return (
            
                
                    
                    
                    hello,world
                    hello,world
                    hello,world
                    hello,world
                    hello,world
                    hello,world
                
            
        )
    }
}

效果:

image.png

10.使用长列表

React Native 提供了几个适用于展示长列表数据的组件，一般而言我们会选用FlatList或是SectionList

10.1 FlatList

FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。

FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。

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

export default class App extends Component {
    render() {
        return (
            
                 { return {item.key}  }}
                >

                
            
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 64
    },
    itemStyle: {
        marginBottom: 1,
        fontSize: 30,
        height: 44,
        backgroundColor: 'red'
    }
})

效果:

image.png

10.2 SectionList

渲染的是一组需要分组的数据，也许还带有分组标签的，那么SectionList将是个不错的选择


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

export default class App extends Component {
    render() {
        return (
            
                 {item}}
                    renderSectionHeader={({ section }) => {section.title}}
                    keyExtractor={(item, index) => index}
                />
            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 50
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
})

效果:

image.png

11.网络

使用 Fetch

React Native 提供了和 web 标准一致的Fetch API，用于满足开发者访问网络的需求。如果你之前使用过XMLHttpRequest(即俗称的 ajax)或是其他的网络 API，那么 Fetch 用起来将会相当容易上手。这篇文档只会列出 Fetch 的基本用法，并不会讲述太多细节，你可以使用你喜欢的搜索引擎去搜索fetch api关键字以了解更多
信息。

发起请求
要从任意地址获取内容的话，只需简单地将网址作为参数传递给 fetch 方法即可（fetch 这个词本身也就是获取的意思）：

fetch('https://mywebsite.com/mydata.json');

Fetch 还有可选的第二个参数，可以用来定制 HTTP 请求一些参数。你可以指定 header 参数，或是指定使用 POST 方法，又或是提交数据等等：

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

提交数据的格式关键取决于 headers 中的Content-Type。Content-Type有很多种，对应 body 的格式也有区别。到底应该采用什么样的Content-Type取决于服务器端，所以请和服务器端的开发人员沟通确定清楚。常用的'Content-Type'除了上面的'application/json'，还有传统的网页表单形式，示例如下：

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: 'key1=value1&key2=value2',
});

处理服务器的响应数据
上面的例子演示了如何发起请求。很多情况下，你还需要处理服务器回复的数据

网络请求天然是一种异步操作,Fetch 方法会返回一个Promise，这种模式可以简化异步风格的代码（译注：同样的，如果你不了解 promise，建议使用搜索引擎补课）：

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);
    });
}

默认情况下，iOS 会阻止所有 http 的请求，以督促开发者使用 https。如果你仍然需要使用 http 协议，那么首先需要添加一个 App Transport Security 的例外，详细可参考这篇帖子。

从 Android9 开始，也会默认阻止 http 请求，请参考相关配置

使用其他的网络库
eact Native 中已经内置了XMLHttpRequest API(也就是俗称的 ajax)。一些基于 XMLHttpRequest 封装的第三方库也可以使用，例如frisbee或是axios等。但注意不能使用 jQuery，因为 jQuery 中还使用了很多浏览器中才有而 RN 中没有的东西（所以也不是所有 web 中的 ajax 库都可以直接使用）

var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
  if (request.readyState !== 4) {
    return;
  }

  if (request.status === 200) {
    console.log('success', request.responseText);
  } else {
    console.warn('error');
  }
};

request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();

需要注意的是，安全机制与网页环境有所不同：在应用中你可以访问任何网站，没有跨域的限制。

WebSocket 支持
React Native 还支持WebSocket，这种协议可以在单个 TCP 连接上提供全双工的通信信道。

var ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  // connection opened
  ws.send('something'); // send a message
};

ws.onmessage = (e) => {
  // a message was received
  console.log(e.data);
};

ws.onerror = (e) => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = (e) => {
  // connection closed
  console.log(e.code, e.reason);
};

以上就是RN的入门指南了,如果需要了解更多组件以及使用,请参考:

React-Native 中文网站

参考链接: https://reactnative.cn/docs/getting-started/

Web开发 | React-Navite 介绍 & 使用总结 (九)

介绍

RN环境搭建:

1.配置RN基本开发环境

2.创建项目

3.编译并运行 React Native 应用

4. 热加载

RN初识-Hello,world

核心概念

1. Component 组件

2. Props（属性）

3. State（状态）

4. 样式

5.高度与宽度

5.1 指定宽高

5.2 弹性（Flex）宽高

6. Flexbox布局

6.1 Flex Direction

6.2 Justify Content

6.3 Align Items

7. 处理文本输入

8. 处理触摸事件

8.1 显示一个简单的按钮

9.使用滚动视图

10.使用长列表

10.1 FlatList

10.2 SectionList

11.网络

使用 Fetch

你可能感兴趣的:(Web开发 | React-Navite 介绍 & 使用总结 (九))