React Native上手-白红宇

组件类型

View: 容器组件

Text: 文本组件

TouchableWithoutFeedback: 点击组件，默认不做点击响应，还有其他类型组件，比如TouchableHighlight FlatList: 列表组件

TextInput: 输入框组件，支持多行

ScrollView: 滚动区域组件

常用的大概就这些，对于组件，会有不同的用法，比如文字只能放在Text里使用，数组数据只有传到FlatList里才能正常使用，点击事件只有在Touch开头的容器里才会生效。引入方式，比如：

import { Text, View } from 'react-native'; 具体可以直接上官网：

触发事件

也是特定的组件才能触发的，比如onChangeText，规定只有TextInput组件触发

onPress：触摸

onLongPress: 长按

onSubmitEditing: 会在文本被提交后（用户按下软键盘上的提交键）调用

原生外援

如果你需要针对应用的某一部分特别优化，中途换用原生代码编写也很容易。想要应用的一部分用原生，一部分用React Native也完全没问题 —— Facebook的应用就是这么做的。

import React, { Component } from 'react';import { Text, View } from 'react-native';import { TheGreatestComponentInTheWorld } from './your-native-code';class SomethingFast extends Component {    render() {        return (            
                    
                     
     
      上面这个TheGreatestComponentInTheWorld组件完全可以使用原生Objective-C、Java或是Swift来编写 - 开发流程并无二致。                
                 
            );    }}复制代码

网络请求

Fetch 方法会返回一个Promise，这种模式可以简化异步风格的代码，需要注意的是，安全机制与网页环境有所不同：在应用中你可以访问任何网站，没有跨域的限制。

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

fetch api

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();复制代码

request send

Props和State

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。 React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

Fixed 尺寸 & Flex 尺寸

export default class FlexDimensionsBasics extends Component {  render() {    return (      // Try removing the `flex: 1` on the parent View.      // The parent will not have dimensions, so the children can't expand.      // What if you add `height: 300` instead of `flex: 1`?      
            
             
             
           
        );  }}复制代码