ReactNative之基本组件(七)

一.View

• 一般用于容器，放子组件
• 不能监听点击事件

二.TouchableOpacity

• 外层包装一个TouchableOpacity，View就能实现点击
• 实现点击后会出现透明效果，通过属性activeOpacity进行调整，0表示完全透明，1表示不透明
• 注意：onPress与onPressIn，onPressOut，有冲突，不要同时实现

            <View style={styles.mainStyle}>
                <TouchableOpacity activeOpacity={0.7}
                                  onPress={()=>{
                                      alert('点击')
                                  }}
                                  onLongPress={()=>{
                                      alert('长按')
                                  }}
                                  onPressIn={()=>{
                                      alert('手指按下')
                                  }}
                                  onPressOut={()=>{
                                      alert('手指抬起')
                                  }}
                                  disabled={true}
                >
                    <View style={styles.redViewStyle}></View>
                </TouchableOpacity>
            </View>

• disabled属性设置为true可以禁止组件交互

三.Text

• 常用属性：

numberOfLines:最大行数
selectable:决定客户是否可以选中文本复制粘贴，默认false
suppressHighlighting：默认有灰色阴影，想取消就设置为true

• 监听文字点击：onPress

               <Text numberOfLines={1}
                      selectable={true}
                      style={styles.textStyle}
                      onPress={()=>{
                          console.log('点击文本');
                      }}
                      suppressHighlighting={true}
                >
                    Hello
                </Text>

• 常用样式属性

color：字体颜色 

fontSize:字体 fontWeight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') 
指定字体的粗细。大多数字体都支持'normal'和'bold'值。如果某个字体不支持，则会自动选择最接近的值。 

lineHeight：行高 

textAlign enum('auto', 'left', 'right', 'center', 'justify') 
指定文本的对齐方式。其中'justify'值仅iOS支持，在Android上会变为left

四.Button

• Button设置样式无效，开发中一般不用，使用text的点击事件代替
• 常用属性：

color color :文本的颜色(iOS)，或是按钮的背景色(Android)

disabled bool :设置为true时此按钮将不可点击

onPress function :用户点击此按钮时所调用的处理函数

title string :按钮内显示的文本

                <Button title="按钮"
                        color='red'
                        onPress={()=>{
                            alert('点击按钮')
                        }}
                >
                </Button>

五.TextInput

• 默认没有边框，需要自己添加borderWidth
• 常用属性

autoFocus：自动获取焦点, 如果为true，在componentDidMount后会获得焦点。默认为false 

blurOnSubmit: true按回车时候自动退出键盘，但必须是英文键盘

editable:文本框是否可以编辑，默认值为true

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

maxLength:最大字符数，显示输入文本长度 

multiline:默认文本输入框只能一行，true可多行输入

placeholder: 占位文字 

placeholderTextColor：占位字符串显示的文字颜色 

returnKeyType enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') #：决定键盘右下角按钮显示的内容 

secureTextEntry：是否安全输入,注意：多行无效果 

selectionColor:设置光标颜色 

clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') : 显示“清除”按钮 

clearTextOnFocus: 重新获取焦点后，是否清空之前的文本 

enablesReturnKeyAutomatically: 默认false。为true时，文本框内没有文字的时候，键盘禁用确认按钮。

• 常用方法

// 清空输入框的内容
clear() 

• 监听文本框事件

onBlur:文本框失去焦点
onChange：内容变化
onChangeText: 内容变化时调用此函数, 改变后的文字作为参数传递
onEndEditing:当文本输入结束后调用此回调函数
onFocus:当文本框获得焦点的时候调用此回调函数
onSubmitEditing:此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true}，此属性不可用
onKeyPress:当一个键被按下的时候调用此回调。传递给回调函数的参数为{ nativeEvent: { key: keyValue } }，其中keyValue即为被按下的键。会在onChange之前调用

 <View style={styles.mainViewStyle}>
                <TextInput placeholder={'占位文字'}
                           style={styles.textStyle}
                           //multiline={true}
                           clearButtonMode="always"
                           secureTextEntry={true}
                           autoFocus={true}
                           blurOnSubmit={true}
                           selectionColor="red"
                           clearTextOnFocus="true"

                           onBlur={()=>{
                           console.log('文本框失去焦点');
                           }}
                           onChangeText={(text)=>{
                               console.log('文字改变'+text)
                           }}
                           onEndEditing={()=>{
                               console.log('文本框结束编辑');
                           }}
                           onFocus={()=>{
                               console.log('获取焦点');
                           }}
                           onSubmitEditing={()=>{
                               console.log('点击提交按钮');
                           }}
                />
            </View>

六.Image

• 设置网络图片
• uri加载注意：通过uri加载资源，必须设置图片尺寸，否则不显示

                <Image source={{uri:'http://img01.youxiaoshuo.com/portal/201703/21/083647y43dl1j14s8s3g99.jpg'}}
                       style={styles.imageStyle}
                />

• 加载RN中图片

                <Image source={require('./Img/chaolan.jpeg')}
                       style={styles.imageStyle}
                />

• 加载iOS中图片

                <Image source={{uri:'wukong'}}
                       style={styles.imageStyle}
                />

• Image常用属性

blurRadius ：图片模糊

defaultSource  {uri: string, width: number, height: number, scale: number} 
:占位图片

resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center') 
决定图片尺寸大小

cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸

contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸

stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器

repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用

center: 居中不拉伸

• 本地图片存放位置
  • RN项目中
  • xcode项目中
  • 可以存放到RN的安卓项目中, 放入drawable-xxhdpi文件中
    安卓的图片名称，不能以数字开头，也不能有大写字母
自己生成drawable-xxhdpi文件夹，把图片放进去，然后把文件夹drawable-xxhdpi存放到安卓文件中res文件夹中