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=)