6.React Native基本组件介绍；

目录

1.View(容器)

2.TouchableOpacity(触摸控件)

2.1TouchableOpacity实现原理

2.2常用属性

2.3触摸事件监听

3.Text

3.1Text介绍

3.2常用属性

3.3常用的样式Style

4.Image

4.1Image介绍

4.2图片加载方式

4.3常用属性

4.4常用的监听事件

4.4方法

5.TextInput

5.1TextInput介绍

5.2常用属性

5.3常用的监听事件

5.4方法

6.Button

6.1Button介绍

---

首先我们要学习RN需要先了解一下RN中的常用的基础组件，那么RN的基础组件都有哪些呢？

RN基础组件

1.View(容器)

a.View是RN中最基础的组件，View 是一个支持 Flexbox 布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图;

b.View直接对应原生系统（IOS或Android）中的UIView或者android.view.View;

c.View没有点击事件，不能监听点击操作；

d.若需要监听点击操作需要借助TouchableOpacity做为容器包裹子视图；

下面的例子创建了一个 View，包含了两个有颜色的方块和一个自定义的组件，并且设置了一个内边距：

class ViewColoredBoxesWithText extends Component {
  render() {
    return (
      <View
        style={
  {
          flexDirection: "row",
          height: 100,
          padding: 20
        }}
      >
        <View style={
  { backgroundColor: "blue", flex: 0.3 }} />
        <View style={
  { backgroundColor: "red", flex: 0.5 }} />
        <Text>Hello World!</Text>
      </View>
    );
  }
}

2.TouchableOpacity(触摸控件)

2.1TouchableOpacity实现原理

本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低。

不透明度的变化是通过把子元素封装在一个Animated.View中来实现的，这个动画视图会被添加到视图层级中，少数情况下有可能会影响到布局。（译注：此组件与TouchableHighlight的区别在于并没有额外的颜色变化，更适于一般场景。）

注意：TouchableOpacity的默认点击区域和子视图一致，实际开发中我们开发根据需要设置TouchableOpacity控件的大小，扩大点击区域；

2.2常用属性

a.activeOpacity

指定封装的视图在被触摸操作激活时以多少不透明度显示（0到1之间）。默认值为0.2。

也可以通过setOpacityTo((value: number), (duration: number));方法设置点击时的透明度，该方法设置以后会有过渡动画；

b.disabled

设置是否可以进行交互，默认值为true;

2.3触摸事件监听

onLongPress
onPress
onPressIn
onPressOut

a.onLongPress

长触摸监听；

b.onPress

当触摸操作结束时调用，但如果被取消了则不调用（譬如响应者被一个滚动操作取代）。

c.onPressIn

当触摸事件发生时(手指按下)会立即出发，发生在onPress监听之前；当进行网络请求时，这个监听是非常有用的；

d.onPressOut

当触摸释放(手指抬起)时被调用，在onPress监听之前；

示例：

<TouchableOpacity

                    onLongPress={()=>{
                        // alert('onLongPress')
                        console.log("onLongPress");
                    }}
                    onPress={()=>{
                        // alert('onPress')
                        console.log("onPress");
                    }}
                    onPressIn={()=>{
                        // alert('onPressIn')
                        console.log("onPressIn");
                    }}
                    onPressOut={()=>{
                        // alert('onPressOut')
                        console.log("onPressOut");
                    }}
                    activeOpacity={0.5}>
                <Text style={
  { backgroundColor: "green"}}
                      >Hello World!</Text>
                </TouchableOpacity>

长按操作输出日志：

onPressIn
onLongPress
onPressOut

点击操作输出日志：

onPressIn
onPressOut
onPress

3.Text

3.1Text介绍

一个用于显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理。

文本嵌套示例：

<Text style={
  {fontWeight: 'bold'}}>
        I am bold
        <Text style={
  {color: 'red'}}>
          and red
        </Text>
      </Text>

3.2常用属性

selectable:决定用户是否可以长按选择文本，以便复制和粘贴;  
ellipsizeMode:这个属性通常和下面的 numberOfLines 属性配合使用，表示当 Text 组件无法全部显示需要显示的字符串时如何用省略号进行修饰。该属性有如下 4 种取值:

head - 从文本内容头部截取显示省略号。例如： "...efg"
middle - 在文本内容中间截取显示省略号。例如： "ab...yz"
tail - 从文本内容尾部截取显示省略号。例如： "abcd..."
clip - 不显示省略号，直接从尾部截断。
默认值tail.

numberOfLines:用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。
此属性一般和ellipsizeMode搭配使用。
onLongPress:长按操作监听；
onPress:按下操作监听；
allowFontScaling：控制字体是