React Native基础入门

1.React Native组件

独立的、可重用的模块。
有3种方式可以创建组件：1. ES6方式创建；2. ES5方式创建；3.函数式定义无状态组件方式

// ES6方式创建组件
type Props = {};
export default class App extends Component {
  render() {
    return (
      
        Welcome to React Native!
        To get started, edit App.js
        {instructions}
      
    );
  }
}

// ES5方式创建组件
var App = React.createClass({
  render(){
    return (
      
        Welcome to React Native!
        To get started, edit App.js
        {instructions}
      
    );
  }
})
module.exports = App;

// 无状态组件方式：没有this，没有生命周期函数
function App(){
  return (
    
      Welcome to React Native!
      To get started, edit App.js
      {instructions}
    
  );
}
module.exports = App;

2.React Native组件生命周期

React Native使用React语法，与React组件拥有一样的生命周期函数，

分为3种状态：
Mounting：挂载，已插入真实Dom
Updating：更新，正在被重新渲染
Unmounting：卸载，已移出真实Dom
4个阶段
创建：只调用getDefaultProps方法
实例化：getInitialState，componentWillMount，render(渲染并返回一个虚拟Dom)，componentDidMount(根据虚拟Dom对象创建真实Dom，可以在此获取Dom节点)
更新：static getDerivedStateFromProps(props, state)；shouldComponentUpdate(nextProps, nextState)；render()；getSnapshotBeforeUpdate(props, state)；componentDidUpdate(preProps, preState, snapshot)
销毁：componentWillUnmount

3.组件的导入与导出

// ES6：export导出，import导入
// 导出
export default class App extends Component{
  render() {
    return (
      Welcome to React Native!
    );
  }
}
// 导入
import App from './App';

// ES5: module.export导出，import导入
// 导出
var App = React.createClass({
  render(){
    return (
      Welcome to React Native!
    );
  }
})
module.exports = App;
//导入
import App from './App';

4.props

React相当于MVC的View层，负责展示，并不涉及到数据，但是组件在使用的过程中有两个属性是和数据有关的：props和state

props：组件自身的属性，一般用于嵌套的内外层组件中，由父组件传给子组件，负责传递信息，也可以用于属性约束和验证。(props对象中的属性与组件属性一一对应--除this.props.children之外，不要直接修改props属性中的值)
...this.props：可以将父组件中传递的全部属性复制给子组件
this.props.children：组件的所有子节点。它的返回值可以是任意类型的，所以用它来处理一些东西的时候很不方便，好在React的React.Children提供了处理this.props.children的一些方法：React.Children.map()，React.Children.forEach()，React.Children.count()，React.Children.only()，React.Children.toArray()，通常与React.cloneElement()结合使用来操作this.props.children。

属性验证：定义外部组件(父组件)传递的属性值类型是否符合组件定义的类型要求（一般在通用组件定义时使用）

propsTypes：在React15.5之前可以通过React.PropTypes 进行属性验证，之后我们需要借助prop-types库。

// 1.引入 prop-types 库
npm install --save prop-types

// 2.导入prop-types
import PropTypes from 'prop-types';

// 3.定义子组件
export default class  PropsTest extends Component{
    // 设置props的默认值
    static defaultProps={ name: 'xiao ming', age: 18, gender: 'man'}
    //约束的关键就是这里在定义属性的时候指定属性的类型，类似安卓private String name;
    static propTypes={
        name: PropTypes.string,
        age: PropTypes.number,
        gender: PropTypes.string.isRequired
    }
    render(){
        //在这里我们使用props中的name属性
          return (
            
              {this.props.name}+' age:'+{this.props.age}+'  gender:'+{this.props.gender}
            
          )
    }
}

// 4.定义父组件，并在父组件中调用子组件
export default class  HomePage extends Component{
    render(){
       const params = { name: 'daming', age: 20, gender: 'man' }
       return 
    }
}

5.state

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。state 的工作原理和 React.js 完全一致。
一般来说，你需要在 constructor 中初始化state（译注：这是 ES6 的写法，早期的很多 ES5 的例子使用的是 getInitialState 方法来初始化 state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法，每次调用setState都会重新调用组件render()方法。有几个点需要注意：

一切界面变化都是状态state变化

state的修改必须通过setState()方法

setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性

setState 是异步操作，修改不会马上生效，要获取到新设置的state属性，需要在setState的回调函数中

export default class  StateTest extends Component{
    // 设置state的默认值
   state = {
    name: '小红',
    age: 16,
    gender: 'women',
   };
   render(){
         return (
           
             {this.state.name}+' age:'+{this.state.age}+'  gender:'+{this.state.gender}
           
         )
   }
}

6.ref

父组件获取子组件的属性

// 子组件
export default class  RefTest extends Component{
    // 设置state的默认值
   state = { name: '小白' };
  getName(){
    return this.state.name;
  }
   render(){
         return (
           
             哈哈哈
           
         )
   }
}

// 父组件
import RefTest from './RefTest';
export default class  RefFather extends Component{
   render(){
         return (
            
               
                  你好，{this.refTest.getName()}！
               
               this.refTest=refTest} />
            
         )
   }
}

7.样式

在 React Native 中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用 JavaScript 来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。
style属性可以是一个普通的 JavaScript 对象，还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样可以间接实现样式的继承。

定义样式

HTML5以 ‘;’ 结尾
RN 以 ‘,’ 结尾

HTML5的key、value都不加引号
RN中属于js对象，key的名字不能出现‘-’，要使用驼峰命名法；如果value为字符串，需要加引号

HTML5中，value如果是数字，需要加单位
RN中，value是数字不需要加单位

实际开发中组件的样式会越来越复杂，建议使用StyleSheet.create来集中定义组件的样式。StyleSheet.create的参数是一个对象，对象中的每个属性都是以键值对的形式定义。

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component {
  render() {
    return (
      
        Welcome to React Native!
        To get started, edit App.js
        {instructions}
      
    );
  }
}

// StyleSheet.create方式定义样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


// 通过style直接在组件内定义
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

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

8.Flexbox布局

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

1.宽高：组件的高度和宽度决定了其在屏幕上显示的尺寸，也就是大小
2.弹性（Flex）宽高：在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间（前提是其父容器的尺寸不为零，如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的）。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）
2.无单位：React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点，确保了在任何不同dpi的设备上显示都不会发生变化

React Native 中的 Flexbox 的工作原理和 web 上的 CSS 不同的是：

1.flexDirection：默认值是column，而不是row，而flex也只能指定一个数字值
2.alignItems：默认值是stretch，而不是flex-start
3.flex：只能指定一个参数并且是数字，而Web CSS中可以接受多参数
4.不支持属性：align-content，flex-basis，order，flex-flow，flex-grow，flex-shrink

9.网络请求

很多移动应用都需要从远程地址中获取数据或资源。你可能需要给某个 REST API 发起 POST 请求以提交用户数据，也可能只是需要从某个服务器上获取一些静态内容。
在React Native中是使用fetch来实现网络请求的。可以参考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',
});

使用 Chrome 调试目前无法查看到 React Native 中的网络请求，可以使用第三方的react-native-debugger来进行查看。

10.基础组件

View
在Web开发中，div是最重要的一个元素，是页面布局的基础。在React Native开发中，View组件的作用类似于div，是最基本的组件，被看作是容器组件，不管是显示一个文本还是输入框，都可以把它们放在View组件内部。不论在什么平台上，View 都会直接对应一个平台的原生视图，无论它是 UIView、div还是 android.view.View

Text
显示文本内容的组件

Image
显示图片内容的组件。用于显示多种不同类型图片的 React 组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等

TextInput
文本输入框组件

ScrollView
可滚动的容器视图。封装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。
必须要有一个确定的高度，在确保父级容器已经设置了高度情况下，可以通过设置flex: 1以使其自动填充父容器的空余空间

和FlatList组件相比：ScrollView会简单粗暴地把所有子元素一次性全部渲染出来，毫无疑问这会导致一些性能问题，而FlatList会惰性渲染子元素，只在它们将要出现在屏幕中时才开始渲染。除非你要渲染的数据特别少，否则你都应该尽量使用FlatList，此外FlatList还可以方便地渲染行间分隔线，支持多列布局，无限滚动加载等等

StyleSheet
提供类似CSS样式表的样式抽象层

11.交互控件

常见的跨平台的交互控件
Button
一个简单的跨平台的按钮控件。组件的样式是固定的，可以使用TouchableOpacity或是TouchableNativeFeedback组件来定制自己所需要的按钮

Picker
在iOS和Android上调用各自原生的选择器控件。

 this.setState({language: itemValue})}>

Slider
滑动数值选择器

Switch
开关，跨平台通用受控组件。通过onValueChange回调来更新value属性以响应用户的操作。如果不更新value属性，组件只会按一开始给定的value值来渲染且保持不变

12.列表视图

只会渲染当前屏幕可见的元素(懒加载)，这样有利于显示大量的数据
FlatList
常用功能

1.完全跨平台。
2.支持水平布局模式。
3.行组件显示或隐藏时可配置回调事件。
4.支持单独的头部组件。
5.支持单独的尾部组件。
6.支持自定义行间分隔线。
7.支持下拉刷新。
8.支持上拉加载。
9.支持跳转到指定行（ScrollToIndex）

SectionList
类似FlatList，多了分组显示。
常用功能

1.完全跨平台。
2.行组件显示或隐藏时可配置回调事件。
3.支持单独的头部组件。
4.支持单独的尾部组件。
5.支持自定义行间分隔线。
6.支持分组的头部组件。
7.支持分组的分隔线。
8.支持多种数据源结构
9.支持下拉刷新。
10.支持上拉加载。