RN8_React-Native知识点3之-基本控件（1）

RN8_知识点之-基本控件（1）

参考：

http://www.cnblogs.com/Sweet-Candy/p/5695389.html

https://reactnative.cn/docs/0.41/toolbarandroid.html

View

View

是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器。

它

的设计初衷是和

StyleSheet

搭配使用，这样可以使代码更清晰并且获得更高的性能。

方法属性：

名称	属性or方法	类型	说明
accessible	属性	Boolean	当为true时，表示该元素是可以进行访问，  默认情况下所有可触摸的元素控件都是可以访问的
onAccessibilityTap	方法	Function	该当accessible为true的时候并且用户对控件View做了一个Tap(轻轻的触摸或者点击)的手势
onLayout	方法	function	当组件的布局发生变动的时候，会自动调用下面的方法   :{nativeEvent: { layout: {x, y, width, height}}}。 该事件当重新计算布局的时候会立即进行触发，不过界面可能不会立即刷新， 特别当布局动画正在加载中的时候。
onMagicTap	方法	function	当accessible为true的时候，当用户双指点击(Magic Tap)的时候，进行触发

 

Text

属性方法(主要一些可用的属性)

①.allowFontScaling(bool):控制字体是否根据iOS的设置进行自动缩放-iOS平台,Android平台不适用

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

③.onLayout (function) 当布局位置发生变动的时候自动进行触发该方法,其中该function的参数如下:

[code lang="" start="" highlight=""]{nativeEvent:{layout: {x, y, width, height}}}[/code]

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

风格样式

1.color:字体颜色

2.fontFamily 字体名称

fontSize  字体大小

4.fontStyle   字体风格(normal,italic)

5.fontWeight  字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500','600', '700', '800', '900')

6.textShadowOffset 设置阴影效果{width: number, height: number}

7..textShadowRadius 阴影效果圆角       9..textShadowColor 阴影效果的颜色

8.letterSpacing 字符间距           11.lineHeight 行高

9.textAlign   文本对其方式("auto", 'left', 'right', 'center', 'justify')

10.textDecorationLine  横线位置 ("none", 'underline', 'line-through', 'underlineline-through')

11.textDecorationStyle   线的风格("solid",'double', 'dotted', 'dashed')

12.textDecorationColor  线的颜色       16.writingDirection  文本方向("auto",'ltr', 'rtl')

 

Image

引入本地资源图片和引入网络图片；

注意：

Android是不支持GIF和WebP格式的。你需要在

android/app/build.gradle

文件中根据需要手动添加以下模块：

属性方法

1.onLayout   (function) 当Image布局发生改变的，会进行调用该方法，调用的代码为:

{nativeEvent: {layout: {x, y, width,height}}}.

2.onLoad (function):当图片加载成功之后，回调该方法

onLoadEnd (function):当图片加载失败回调该方法，该不会管图片加载成功还是失败

4.onLoadStart (fcuntion):当图片开始加载的时候调用该方法

5.resizeMode  缩放比例,可选参数('cover','contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候，会根据设置Mode进行缩放或者裁剪图片

6.source {uri:string} 进行标记图片的引用，该参数可以为一个网络url地址或者一个本地的路径

样式风格

1.FlexBox  支持弹性盒子风格

2.Transforms  支持属性动画               resizeMode  设置缩放模式

4.backgroundColor 背景颜色

5.borderColor     边框颜色             6.borderWidth 边框宽度

7.borderRadius  边框圆角

8.overflow 设置图片尺寸超过容器可以设置显示或者隐藏('visible','hidden')

9.tintColor  颜色设置        10.opacity 设置不透明度0.0(透明)-1.0(完全不透明)

 

TextInput

一个允许用户在应用中通过键盘输入文本的基本组件。可以订阅它的onChangeText事件来读取用户的输入。它还有一些其它的事件，譬如onSubmitEditing和onFocus。

属性方法(这边讲解平台公用以及Android生效的属性方法)

1、View 支持View的相关属性

2、autoCapitalize 控制TextInput输入的字符进行切换成大写(可选择参数:'none', 'sentences', 'words', 'characters')

l  none:不自动切换任何字符成大写

l  sentences:默认每个句子的首字母变成大写

l  words:每个单词的首字母变成大写

l  characters:每个字母全部变成大写

3、autoCorrect bool  设置拼写自动修正功能默认为开启(true)

4.autoFocus bool  设置是否默认获取到焦点默认为关闭(false)。该需要componentDidMount方法被调用之后才会获取焦点哦(componentDidMount是React组件被渲染之后React主动回调的方法)

5、defaultValue  string 给文本输入设置一个默认初始值。

6、editable bool  设置文本框是否可以编辑默认值为true,可以进行编辑

7、keyboardType  键盘类型(可选参数:"default", 'email-address', 'numeric', 'phone-pad',"ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad','name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 该用来选择默认弹出键盘的类型例如我们甚至numeric就是弹出数字键盘。鉴于平台的原因如下的值是所有平台都可以进行通用的

default

numeric           数字键盘

email-address  邮箱地址

8、maxLength number  可以限制文本输入框最大的输入字符长度

9、multiline bool  设置可以输入多行文字，默认为false(表示无论文本输入多少，都是单行显示)

10、onBlur  function 监听方法，文本框失去焦点回调方法

11、onChange function 监听方法,文本框内容发生改变回调方法

12、onChangeText  function监听方法，文本框内容发生改变回调方法，该方法会进行传递文本内容

13、onEndEditing  function监听方法，当文本结束文本输入回调方法

14、onFocus  function 监听方法  文本框获取到焦点回调方法

15、onLayout  function监听方法  组价布局发生变化的时候调用，调用方法参数为 {x,y,width,height}

16、onSubmitEditing function监听方法，当编辑提交的时候回调方法。不过如果multiline={true}的时候，该属性就不生效

17、placeholder string 当文本输入框还没有任何输入的时候，默认显示信息，当有输入的时候该值会被清除

18、placeholderText Color  string 设置默认信息颜色(placeholder)

19、secureTextEntry  bool 设置是否为密码安全输入框 ，默认为false

20、style 风格属性  可以参考Text组件风格

21、value  string 输入框中的内容值

以上是一些Android，iOS平台通用的属性，下面根据官网的文档，我这边组要讲解一下适用于Android平台的属性方法

22、numberOfLines number设置文本输入框行数，该需要首先设置multiline为true,设置TextInput为多行文本。

23、textAlign 设置文本横向布局方式可选参数('start', 'center', 'end')

24、textAlignVertical 设置文本垂直方向布局方式可选参数('top', 'center', 'bottom')

25、underlineColorAndroid  设置文本输入框下划线的颜色

 

ProgressBarAndroid

属性方法：

1、支持View控件的属性方法 (这些属性是从View控件中继承下来) 例如:大小,布局,边距啊

2、color  设置进度的颜色属性值

3、indeterminate 设置是否要显示一个默认的进度信息，该如果styleAttr的风格设置成Horizontal的时候该值必须设置成false

4、progress number  设置当前的加载进度值(该值在0-1之间)

5、styleAttr   进度条框的风格 ，可以取的值如下:

l  Horizontal

l  Small

l  Large

l  Inverse

l  SmallInverse

l  LargeInverse

 

ScrollView

包装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。

注意：

ScrollView必须有一个确定的高度才能正常工作。它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。

属性方法：

1、View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

2、contentContainerStyle 样式风格属性(传入StyleSheet创建的Style文件)。该样式会作用于被ScrollView包裹的所有的子视图。

3、horizontal  表示ScrollView是横向滑动还是纵向滑动。该默认为false表示纵向滑动

4、keyboardDismissMode  枚举类型表示键盘隐藏类型，可选值('none', "interactive", 'on-drag')  三个值的意义分别如下:

l  none  默认值，表示在进行拖拽滑动的时候不隐藏键盘

l  on-drag   表示在进行拖拽滑动开始的时候隐藏键盘

l  interactive  表示当拖拽触摸移动的同时隐藏键盘，向上拖拽的时候取消隐藏。不过在Android平台上面该选项不支持，所以会和'none'一样的效果。

5、keyboardShouldPersistTaps 该属性默认为false，表示如果当前是textinput控件，并且键盘是弹出状态的话，点击textinput之外地方，会进行隐藏键盘。反之不会有效果，键盘还是成打开状态。

6、onContentSizeChange function  该当滚动视图的内容尺寸大小发生变化的时候进行调用

7、onScroll function  该方法在滚动的时候每frame(帧)调用一次。该方法事件调用的频率可以使用scrollEventThrottle属性进行设置。

8、refreshControl  element 设置元素控件，该可以进行指定RefreshControl组件。这样可以为ScrollView添加下拉刷新的功能、

9、removeClippedSubviews 测试属性 当该值为true的时候。在ScrollView视图之外的视图(该视图的overflow属性值必须要为hidden)会从被暂时移除，该设置可以提高滚动的性能。

10、showsHorizontalScrollIndicator  该值设置是否需要显示横向滚动指示条

11、showsVerticalScrollIndicator该值设置是否需要显示纵向滚动指示条

12、sendMomentumEvents  当ScrollView有onMomentumScrollBegin或者onMomentumScrollEnd方法设置，该sendMomentumEvents值设置为true的时候。变化的事件信息会通过该Android框架自动发送出来，然后之前设置的方法进行捕捉。

ToolbarAndroid

包装了仅限Android平台的

工具栏(Toolbar)

部件的React组件。一个Toolbar可以显示一个徽标，一个导航图标（譬如汉堡形状的菜单按钮），一个标题与副标题，以及一个功能列表。标题和副标题会在中间显示，徽标和导航图标会在左侧显示，而功能列表则在右侧显示。

注意：

使用

require('./some_icon.png')

会自动帮你包装好，所以只要你不直接用

{uri:'http://...'}

，就没什么问题。





属性方法 

1、View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

2、actions 设置功能列表信息属性 传入的参数信息为:

 [{title: string, icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'), showWithText: bool}]   

进行设置功能菜单中的可用的相关功能。该会在显示在组件的右侧(显示方式为图标或者文字)，如果界面上面区域已经放不下了，该会加入到隐藏的菜单中(弹出进行显示)。该属性的值是一组对象数组，每一个对象包括以下以下一些参数:

l  title: 必须的，该功能的标题

l  icon: 功能的图标  采用该代码进行获取 require('./some_icon.png')

l  show: 该设置图标直接显示，还是隐藏或者显示在弹出菜单中。always代表总是显示,ifRoom代表如果Bar中控件够进行显示，或者never代表使用直接不显示

3、showWithText boolean 进行设置图标旁边是否要显示标题信息

contentInSetEnd  number 该用于设置ToolBar的右边和屏幕的右边缘的间距。

4、contentInsetStartnumber 该用于设置ToolBar的左边和屏幕的左边缘的间距。

5、logo optionalImageSource  可选图片资源  用于设置Toolbar的Logo图标

6、navIconoptionalImageSource 可选图片资源用于设置导航图标

7、onActionSelectedfunction方法当我们的功能被选中的时候回调方法。该方法只会传入唯一一个参数:点击功能在功能列表中的索引信息

8、onIconClickedfunction 当图标被选中的时候回调方法

9、overflowIcon optionalImageSource 可选图片资源设置功能列表中弹出菜单中的图标

10、 rtl   设置toolbar中的功能顺序是从右到左(RTL:RightTo Left)。为了让该效果生效，你必须在Android应用中的AndroidMainifest.xml中的application节点中添加android:supportsRtl="true"，然后在你的主Activity(例如:MainActivity)的onCreate方法中调用如下代码:setLayoutDirection(LayoutDirection.RTL)。

11、subtitle string 设置toolbar的副标题

12、subtitleColor color  设置设置toolbar的副标题颜色

1title string  设置toolbar标题

14.titleColor color 设置toolbar的标题颜色