React Native 基础组件与基础

React Native有很多的组件，像文本、图片、加载框等等，首先认识一下基础的，也是最常用的五大组件。

官方描述如下：

REACT NATIVE UI组件	ANDROID视图	IOS视图	html视图	描述
<View>	<ViewGroup>	<UIView>	非滚动 <div>	一个支持Flexbox，样式，一些触摸处理和辅助功能控件布局的容器
<Text>	<TextView>	<UITextView>	<p>	显示，设置样式和嵌套文本字符串，甚至处理触摸事件
<Image>	<ImageView>	<UIImageView>	<img>	显示不同类型的图像
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	通用滚动容器，可以包含多个组件和视图
<TextInput>	<EditText>	<UITextField>	<input type="text">	允许用户输入文字

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的值）。