写在前面

在前面的登录界面中，我们发现所有的组件不会对用户的点击、触摸、拖拽做出合适的响应，这是十分不友好的。那么，在React Native中如何让视图对触发做出合适的响应呢？

高亮触摸 TouchableHighlight

当手指点击按下的时候，该视图的不透明度会进行降低同时会看到相应的颜色，其实现原理则是在底层新添加了一个View。此外，TouchableHighlight只能进行一层嵌套，不能多层嵌套。

常用属性：

activeOpacity number

设置组件在进行触摸的时候，显示的不透明度(取值在0-1之间)

onHideUnderlay function 方法

当底层被隐藏的时候调用

onShowUnderlay function 方法

当底层显示的时候调用

style

可以设置控件的风格演示，该风格演示可以参考View组件的style

underlayColor

当触摸或者点击控件的时候显示出的颜色

代码演示：

前言

在开发中还有一个非常重要的组件Image，通过这个组件可以展示各种各样的图片，而且在React Native中该组件可以通过多种方式加载图片资源。

Image组件的基本用法

从当前项目中加载图片

1
2
3
4

<View style={styles.container}>
    <Text style={styles.textMarginTop}>加载本地的图片</Text>
    <Image source={require('./img/2.png')} style={{width: 120, height: 120}}  />
 </View>

该图片资源文件的查找和JS模块相似，该会根据填写的图片路径相对于当前的js文件路径进行搜索。

此外，React Naive的Packager会根据平台选择相应的文件，例如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios)，会分别根据android或者ios平台选择相应的文件。

加载使用APP中的图片

1
2
3
4

<View style={styles.container}>
    <Text style={styles.textMarginTop}>加载Xcode中的图片</Text>
    <Image source={require('image!icon_homepage_map')} style={{width: 50,height:50}}/>
</View>

使用已经打包在APP中的图片资源(例如:xcode asset文件夹以及Android drawable文件夹)

加载来自网络的图片

客户端的很多图片资源基本上都是实时通过网络进行获取的，写法和上面的加载本地资源图片的方式不太一样，这边一定需要指定图片的尺寸大小，实现如下：

1
2
3
4
5

<View style={styles.container}>
      <Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{flex:1,width:200, height:100, resizeMode: Image.resizeMode.cover}}/>
      <Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{flex:1,width:200, height:100, resizeMode: Image.resizeMode.contain}}/>
      <Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{flex:1,width:200, height:100, resizeMode: Image.resizeMode.stretch}}>
</View>

什么是Text组件？

一个用于显示文本的React组件，和Android中的TextView组件或者OC中的Label组件相类似，专门用来显示基本的文本信息；除了基本的显示布局之外，可以进行嵌套显示，设置样式，以及可以做事件(例如:点击)处理；

Text组件常用的属性方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Attributes.style = {
    color string
    containerBackgroundColor string
    fontFamily string
    fontSize number
    fontStyle enum('normal', 'italic')
    fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
    lineHeight number
    textAlign enum("auto", 'left', 'right', 'center')
    writingDirection enum("auto", 'ltr', 'rtl')
    numberOfLines number
    textAlign ("auto", 'left', 'right', 'center', 'justify')
    fontWeight ("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
    onPress  fcuntion
 }

注释如下：

color 字体颜色

numberOfLines (number) 进行设置Text显示文本的行数，如果显示的内容超过了行数，默认其他多余的信息就不会显示了

onPress (fcuntion) 该方法当文本发生点击的时候调用该方法

color 字体颜色

fontFamily 字体名称

fontSize 字体大小

fontStyle 字体风格(normal,italic)

前言

文本输入框，相当于OC中的UITextField，在用法和属性方面，两者都有很大的借鉴之处：通过键盘将文本输入到应用程序的一个基本的组件；

TextInput的常见属性

因为TextInput是继承自UIView，所以View的属性TextInput也能够使用，一些样式类的属性在学习的时候可以参照View的相关属性。

value 字符串型

文本输入的默认值

onChangeText 函数

监听用户输入的值：

keyboardType 键盘类型

决定打开哪种键盘，例如，数字键盘。

1
2
3

enum('default', "ascii-capable", 'numbers-and-punctuation', 'url', 
'number-pad', 'phone-pad', 'name-phone-pad', 'email-address', 
'decimal-pad', 'twitter', 'web-search', "numeric")

multiline 布尔型

如果值为真，文本输入可以输入多行。默认值为假。

password 布尔型

如果值为真，文本输入框就成为一个密码区域。默认值为假。

placeholder 字符串型

在文本输入之前字符串将被呈现出来，通常被称为占位文字

placeholderTextColor 字符串型

占位符字符串的文本颜色

在前面的案例中，界面的搭建都是采用CSS的布局，基于盒子模型，依赖 display属性 ， position属性， float属性。但对于那些特殊布局非常不方便，比如，垂直居中。

一种全新的针对web和移动开发布局应运而生：Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

FlexBox布局

FlexBox是什么意思呢？

flexible（形容词）：能够伸缩或者很容易变化，以适应外界条件的变化

box（名词）：通用的矩形容器

什么是FlexBox布局?

弹性盒模型（The Flexible Box Module）,又叫Flexbox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。

Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间；

React native中的FlexBox是这个规范的一个子集。

大部分情况下是处理图中FlexItem在FlexContainer中的位置和尺寸关系