React Native有很多的组件，像文本、图片、加载框等等，首先认识一下基础的，也是最常用的五大组件。
官方描述如下：
| REACT NATIVE UI组件 | ANDROID视图 | IOS视图 | html视图 | 描述 |
|---|---|---|---|---|
| | | 非滚动 | 一个支持Flexbox，样式，一些触摸处理和辅助功能控件布局的容器 |
| | | | 显示，设置样式和嵌套文本字符串，甚至处理触摸事件 |
| | | | 显示不同类型的图像 |
| | | | 通用滚动容器，可以包含多个组件和视图 |
| | | | 允许用户输入文字 |
View：布局，可以放置多个组件的集合
Text：文本展示
Image：图片展示
ScrollView：滚动视图，可包含多个组件的集合，View子类
TextInput：文本输入框
React基础
基本引用与文本展示
创建一个React模块，需要首先添加引用：
引用 react：import React from 'react';
通过babel会将jsx编译成普通js代码会用到React，所以需要React
引用所需组件，例如引用Text：import { Text } from 'react-native';
如下所示：我们可以使用Text组件来编写代码
import React from 'react';
import { Text } from 'react-native';
添加以下代码：界面将会出现Hello world文本展示
export default function Hello() {
return (
<Text>Hello world</Text>
);
}
export：可将此模块导出，在其他模块引用
同理，我们还可以一次引用多个组件，例如：一次引用View，Text，TextInput
import { Text, TextInput, View } from 'react-native';
这里可以用View包裹Text和TextInput，使它们可以展现在同一个视图，例如：
export default function Hello() {
return (
<View>
<Text>Hello world</Text>
<TextInput
placeholder="请输入!"
/>
<View>
);
}
图片展示
图片展示需要添加引用image组件，如下所示：
import {Image, View,Text} from 'react-native';
插入代码：要注意网络图片和本地图片写法不一致
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Image
source = {require('')} //插入本地图片
/>
<Text>这是本地图片</Text>
<Image
source = {{uri:''}} //插入网络图片
/>
<Text>这是网络图片</Text>
</View>
);
}
}
其中网络图片和 base64 数据的图片需要手动指定尺寸，如何指定尺寸即样式写法就是下面要说的
填写样式
样式可以直接写到组件里或者通过StyleSheet创建
直接写法：
<Image style={width：200，height：200}
source = {require('')}
/>
长度默认单位dp，在不同的屏幕尺寸会对应不一样大小的px
StyleSheet，首先引用StyleSheet
import {StyleSheet, Image, View,Text} from 'react-native';
添加样式，通过声明styles常量来使用：
const styles = StyleSheet.create({
image: {
height: 200,
width: 200
},
text:{
color:'#000000',
fontSize:20
},
text2:{
color:'#860860',
fontSize:50
}
});
如此将上面那个图文代码改为：
export default class App extends Component {
render() {
return (
<View>
<Image
style={{width}}
source = {require('')}
/>
<Text style={styles.text2}>这是本地图片</Text>
<Image
style = {styles.image}
source = {{uri:''}}
/>
<Text style={styles.text}>这是网络图片</Text>
</View>
);
}
}
这样就加上了样式，当然最外层的View也可以这样添加
ScrollView
滚动视图，当屏幕宽度或高度不足以展示所有内容的时候用它来进行滚动展示，带有滚动条，可垂直和横向滚动
用法和View一样，但是ScrollView必须有一个确定的高度才能正常使用；我们可以在初始化的时候给ScrollView一个指定高度或宽度，这样肯定是不理想的，或者给ScrollView指定flex（权重写法），这样的话它的子组件也需要都指定flex，否则会出现错误。
同理，也需要引入ScrollView；
import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';
export default function hello() {
return (
<ScrollView contentContainerStyle={styles.scroll}>
。。。 //内容，可放图片，文字等等
</ScrollView>
);
}
const styles = StyleSheet.create({
scroll: {
paddingVertical: 20 //上下边距为20
}
});
在React中props和state是两个非常非常非常重要的属性一定要掌握这两个
props属性
props属性起到了在组件之间传值的作用，将传入的值渲染在界面上；将需要调用的方法添加props参数，需要渲染的部分调用时指定其具体的字段，如下代码：
import React from 'react';
import { Text, View } from 'react-native';
function Named(props) { //props只是一个参数，名字可以修改
return (
<View>
<Text>Hello, my name is{props.name}!</Text>
</View>
);
}
export default function hello() { //要渲染的部分
return (
<View>
<Named name="123" />
<Named name="234" />
</View>
);
}
state状态
state顾明思意是状态的意思，react可以在调用setState方法时，更新ui，就是重新渲染界面，这就厉害了，不像我们写html代码时，更新数据需要 divId.html("内容")这样去手动更新。
要先了解一个概念：hooks，React16.7之前的state用法很麻烦，要先给this.state指定一个或多个可能变化的数据（变量），在通过方法修改这个值，要修改state，肯定不能在函数里，需要有类，这就很麻烦；添加hooks以后，可以在不编写类的情况下使用 state(状态) 和其他 React 功能，如下所示一个简单例子：
import React, { useState } from "react";
import { Button, Text, View } from "react-native";
export default function hello() {
const [count, setCount] = useState(0);
return (
<View>
<Text>{count} </Text>
<Button
onPress={() => setCount(count + 1)}
title="add"
/>
</View>
);
}
上面例子意思是 声明一个count变量，初始值为1，我们通过setCount方法去改变这个变量的值的时候，react会重新去渲染UI，改变Text中的值（界面会实时更新count的值）。
![react组件的生命周期的介绍以及适用场景[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)