ReactNative之基本组件(七)

来源:http://www.chinese-glasses.com 作者:Web前端 人气:158 发布时间:2020-03-31
摘要:控制整体文本布局的参数:textAlign(文本对齐方式)、textDirection(文本排版方向)、maxLines(文本显示最大行数)、overflow(文本截断规则),等等。这些都是构造函数中的参数控制文

控制整体文本布局的参数:textAlign(文本对齐方式)、textDirection(文本排版方向)、maxLines(文本显示最大行数)、overflow(文本截断规则),等等。这些都是构造函数中的参数控制文本展示样式的参数:fontFamily(字体名称)、fontSize(字体大小)、color(文本颜色)、shadows(文本阴影)、等等。这些都是构造函数中的参数 style 中的参数

TextInput

  • TextInput:文本输入框
    • 默认没有边框,需要自己添加borderWidth
  • 常用属性
autoFocus:自动获取焦点,如果为true,在componentDidMount后会获得焦点。默认值为false

blurOnSubmit:点击键盘,右下角return,或者按回车的时候,是否自动退出键盘,true:是。注意:键盘必须是英文输入键盘,数字键盘无效.

editable:文本框是否可以编辑,默认值为true,如果为false,文本框是不可编辑的

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:如果为true,键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false
  • 监听文本框事件
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>

Flutter 中有很多 UI 控件,而文本、图片和按钮是 Flutter 中最基本的控件,构建视图基本上都要使用到这三个基本控件

Button

  • 10bet,Button:按钮,当一个文字想要点击效果,可以使用按钮

  • 注意:Button没有样式,设置样式无效,最大的弊端,开发中一般不使用,一般自定义按钮,自己包装一个Text用于按钮.

  • 常用属性

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

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

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

title string :按钮内显示的文本
  • 使用
 <View style={styles.mainViewStyle}>
                <Button style={styles.buttonSytle} title="按钮" color="red"/>
 </View>

加载本地资源图片:Image.asset('images/logo.png');加载本地(File 文件)图片:Image.file(File('/storage/test.png'));加载网络图片:Image.network('');

ReactNative之基本组件

FadeInImage:提供了图片占位的功能,支持在图片加载完成时淡入淡出的视觉效果;ImageCache 使用 LRU(Least Recently User:最近最少使用)算法进行缓存更新策略,并且默认最多存储 1000 张图片,最大缓存限制为 100MB,当限定的空间已存满数据时,把最久没有被访问到的图片清除,图片只缓存在内存中CachedNetworkImage:不仅支持缓存图片到内存中,还支持缓存到文件系统中;加载过程占位与加载错误占位;自定义控件占位按钮

TextInput

  • TextInput:文本输入框
    • 默认没有边框,需要自己添加borderWidth
  • 常用属性
autoFocus:自动获取焦点,如果为true,在componentDidMount后会获得焦点。默认值为false

blurOnSubmit:点击键盘,右下角return,或者按回车的时候,是否自动退出键盘,true:是。注意:键盘必须是英文输入键盘,数字键盘无效.

editable:文本框是否可以编辑,默认值为true,如果为false,文本框是不可编辑的

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:如果为true,键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false
  • 常用方法
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 来加载不同形式、不同格式的图片

Text

  • Text:用于展示一段文字
  • 常用属性:
numberOfLines:最大行数,超出最大行数,就不会完全显示,超出部分显示...
selectable:决定用户是否可以长按选择文本,以便复制和粘贴,默认false
suppressHighlighting:默认情况下,文本被按下时会有一个灰色的阴影,如果想取消就设置为true
  • 监听文字点击

    • onPress
  • 常用样式属性

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
  • 使用
            <View style={styles.mainViewStyle}>
                <Text style={styles.textStyle}
                      numberOfLines={1}
                      selectable={true}
                      onPress={()=>{alert('点击文字')}}
                >
                    文本
                </Text>
            </View>

混合样式的富文本 Text.rich

一、View

  • View组件在RN开发中是最常用的
    • 一般常用于容器,往里面添加子控件,任何子组件都可以,View里面也可以在放View.
    • 没有点击事件,不能监听点击。

文本控件

2.2 disabled属性

  • 如果设为true,则禁止此组件的一切交互
  • 通过disabled,可以控制一个被TouchableOpacity包装的组件什么时候能点击。

单一样式的文本 Text

2.1 如何监听TouchableOpacity点击

  • 注意:onPress与onPressIn,onPressOut,有冲突,不要同时实现
onLongPress function :长按的时候调用

onPress function :点击的时候调用

onPressIn function :手指按下的时候调用

onPressOut function :手指抬起的时候调用
  • 使用

按钮控件中的参数

2.2 disabled属性

  • 如果设为true,则禁止此组件的一切交互
  • 通过disabled,可以控制一个被TouchableOpacity包装的组件什么时候能点击。

支持高级功能的图片控件

Text

  • Text:用于展示一段文字
  • 常用属性:
numberOfLines:最大行数,超出最大行数,就不会完全显示,超出部分显示...
selectable:决定用户是否可以长按选择文本,以便复制和粘贴,默认false
  • 监听文字点击

    • onPress
  • 常用样式属性

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
  • 使用
            <View style={styles.mainViewStyle}>
                <Text style={styles.textStyle}
                      numberOfLines={1}
                      selectable={true}
                      onPress={()=>{alert('点击文字')}}
                >
                    文本
                </Text>
            </View>

本文由10bet发布于Web前端,转载请注明出处:ReactNative之基本组件(七)

关键词:

最火资讯