React Native中一些常用组件用法

View组件

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

View的设计初衷是和StyleSheet搭配使用，这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用

View的属性介绍，请参考官网

View的常用样式设置flex布局样式
backgroundColor：背景颜色
borderColor：边框颜色
borderWidth：边框大小
borderRadius：圆角

例如：

 <View style={styles.container}><View style={[styles.flex, styles.center]}><Text style={styles.white}>酒店</Text></View><View style={styles.flex}><View style={[styles.flex, styles.leftRightLine, styles.bottomLine, styles.center]}><Text style={styles.white}>海外酒店</Text></View><View style={[styles.flex, styles.leftRightLine, styles.center]}><Text style={styles.white}>特价酒店</Text></View></View><View style={styles.flex}><View style={[styles.flex, styles.bottomLine, styles.center]}><Text style={styles.white}>团购</Text></View><View style={[styles.flex, styles.center]}><Text style={styles.white}>民宿•客栈</Text></View></View></View>

Text组件

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

常用特性详见官网

onPress：手指触摸事件 点击事件
numberOfLines ：显示多少行

常用样式设置

color：字体颜色
fontSize：字体大小
fontWeight：字体加粗enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
指定字体的粗细。大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果     某个值不支持，则会自动选择最接近的值。
textAlign：对齐方式
lineHeight number

 <View style={styles.container}><Text style={styles.font}><Text style={styles.red}>网易</Text><Text style={styles.white}>新闻</Text><Text>有态度</Text></Text></View>

Touchable类组件

该组件用于封装视图，使其可以正确响应触摸操作

常用设置

TouchableOpcity：透明触摸，点击时，组件会出现透明过度效果。
TouchableHighlight：高亮触摸，点击时组件会出现高亮效果。只能进行一层嵌套，不能多层嵌套
TouchableWithoutFeedback：无反馈触摸，点击时候，组件无视觉变化。

<TouchableOpacityoactiveOpacity={0.8}onPress={this.onButtonClick}style={styles.signBtn}><Text style={styles.signBtnText}>立即签到</Text>
</TouchableOpacity>
oactiveOpacity:指定封装的视图在被触摸操作激活时以多少不透明度显示（通常在0到1之间

TextInput组件

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等

组件的通用属性

（1）autoCapitalize：首字母自动大写。可选值有：none、sentences、words、characters。● none：不自动变为大写● sentences：将每句话的首字母自动改成大写● words：将每个单词的首字母自动改成大写● characters：将每个英文字母自动改为大写（2）placeholder：占位符，在输入前显示的文本内容。（3）value：用来设置 TextInput 组件内字符串的值。● 要慎重使用这个属性，因为它有可能会带来屏幕显示闪烁。● 官方更推荐使用 editable 属性和 defaultValue 属性来达到相同的效果。● 当然如果应用需要突然改变 TextInput 组件内字符串的值，还是需要使用这个属性。（4）placeholderTextColor：占位符文本的颜色。（5）password：如果为 true，表示密码输入框。文本显示为“*”（6）multiline：如果为 true，表示多行输入。（7）editable：默认为 true。如果设置为 false 表示不可编辑。（8）autoFocus：如果为 true，则自动获取焦点。（9）maxLength：能够输入的最长字符数。（10）returnKeyType：表示软键盘返回键显示的字符串。可选值如下：● 跨平台支持的值：done、go、next、search、send● 仅 Android 支持的值：none、previous● 仅 iOS 支持的值：default、google、join、route、yahoo、emergency-call（11）keyboardType：定义了当 TextInput 组件获得焦点时，将自动弹出哪种软键盘。可选值如下：● Android、iOS 都支持的：default、numeric、email-address● 仅支持 iOS：ascii-capable、numbers-and-punctuation、url、number-pad、phone-pad、name-phone-pad、decimal-pad、twitter、web-search（12）secureTextEntry：默认为 false。如果为 true，则像密码框一样隐藏输入内容。（13）autoCorrect：如果为 true，则会自动更正用户输入的英文单词是否正确。（默认值：true）（14）blurOnSubmit：如果为 true，在输入框输入完成提交是，文本区域会被模糊化。它的默认值是 TextInput 组件 multiline 属性的非值。如果一个 TextInput 组件的 multiline 属性与 blurOnSubmit 都为 true 时，用户按下键盘上的回车键会模糊化输入的文本并触发 onSubmitEditing 事件，而不是在输入区域插入新行。（15）defaultValue：用来定义 TextInput 组件中的字符串默认值。（16）selectTextOnFocus：当它为 true 时，如果 TextInput 组件获得焦点，则组件中所有的文字都会被选中。（17）selection：这个是一个对象类型的属性。它接受的对象结构为：
{start: number,end: number
}● 我们可以用来设置 TextInput 组件中被选择字符的开始与结束位置。● 如果把开始位置与结束位置设为同一个值可以达到设置输入光标至该位置的效果。（18）selectionColor：用来设置被选中文字的高亮显示颜色。在 iOS 平台，还可以使用这个属性设置输入光标的颜色。

iOS和Android特有属性，见官网

组件的方法属性

（1）onChange：当文本发生变化时，调用该函数。● 它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。（2）onChangeText：当文本发生变化时，调用该函数。● onChangeText 回调函数与上面的 onChange 类似，但它的好处是直接可以接收用户输入的字符串。（3）onEndEditing：当结束编辑时，调用该函数。● 它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。（4）onBlur：失去焦点时触发（在 onEndEditing 之后）。● 它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。（5）onFocus：获得焦点时触发。● 它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取组件中的字符串（上次输入的，或者是程序设定的默认值）（6）onSubmitEditing：当结束编辑后，点击键盘的提交按钮触发该事件。● 它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。
当我们通过 multiline={true} 将一个 TextInput 组件设置为多行时，要注意：● 在 iOS 平台上，这个 TextInput 组件的 onSubmitEditing 事件永远也不会被触发，onSubmitEditing 回调函数也永远不会被执行。● 在 Android 平台上，用户每一次按下回车键后，onSubmitEditing 事件都会被触发，但输入框中的字符串会增加一个回车换行，同时输入框会继续保持住焦点，不会失去焦点。（7）onSelectionChange：当用户在文本输入框中选择的字符串发生改变时触发。● 该回调函数会传入一个 event 参数，通过这个参数我们可以得到用户在输入框中选择一段字符串这个事件发生的时间，以及选择的子字符串在输入框中的起点位置与结束位置。
{timeStamp: 事件发生时的时间值nativeEvent: {selection: {start: 用户选中的子字符串起点位置end: 用户选中的子字符串结束位置}}
}● 当用户移动输入光标时，这个事件也会被触发。比如我们将 TextInput 组件的输入光标移动到最开始位置，那么 event.nativeEvent.selection.start 和 event.nativeEvent.selection.end 的值都是 0。 （8）onKeyPress（iOS 专有）：当 TextInput 组件获得焦点后，一个按键被按下时，这个回调函数将被调用并被传入按下键的键值。这个函数会在 onChange 回调函数之前被调用。 （9）onContentSizeChange：当 TextInput 组件的字符行数变化时触发该事件。因此这个回调函数只对多行 TextInput 组件有效，它的参数是一个对象，我们可以从中得到当前 TextInput 组件的新的宽与高。
{nativeEvent: {contentSize: {width: number,height: number}}
}
（10）onScroll：在 TextInput 组件滚动时会被调用。它的参数是一个对象，我们可以从中得到组件当前滚动的位置。
{nativeEvent: {contentOffset: {x: number,y: number}}
}
（11）onSelectionChange：会在 TextInput 组件的选中字符被改变时调用。它的参数是一个对象，我们可以通过其得到用户选择的字符串。
{nativeEvent: {selection: {start: number,end: number}}
}

<View style={styles.textareaContent}><Text style={styles.tcTitle}>反馈内容：</Text><TextInputmultiline={true}//多行输入style={styles.tcInput}autoCapitalize="none"//不自动切花任何大小写placeholder="请填写您的宝贵意见，让58不断进步，谢谢！"placeholderTextColor="#CCC"onChangeText={(textarea) => this.setState({ textarea })}/>
</View>

Image组件详见

ScrollView组件

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

注意一定要给scrollview一个高度，或者是他父级的高度。

属性参数详见官网

React Native中一些常用组件用法相关推荐

react native 中下拉列表FlatList组件的讲解以及实例demo
RN中的下拉列表组件.以前RN的下拉列表是listView,但是这个组件的性能不咋地.当数据较多的时候就会很卡.所以RN就新出了一个FaltList组件来代替它.这里我们简单总结一下新的下拉组件. 一 ...
如何在React Native中写一个自定义模块
前言在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
如何在 React Native 中写一个自定义模块
前言在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
Android之React Native 中组件的生命周期
React Native 中组件的生命周期概述就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对 ...
React Native开发之常用第三方控件
前言 http://blog.csdn.net/xiangzhihong8/article/details/53968573 React Native出来一年多了,受到各大开发人员的喜爱,但是由于只是 ...
react封装函数_GitHub - daifee/react-component: 用 React 封装一套常用组件
Daifee-React-Component 用 React 封装一套常用组件所有组件都是 stateless 组件,但为方便,某些组件提供 API 调用方式的静态方法. [TOC] 使用前须知源 ...
如何在React Native中使用Redux Saga监视网络更改
by Pritish Vaidya 通过Pritish Vaidya 如何在React Native中使用Redux Saga监视网络更改 (How to monitor network change ...
解决 React Native 中的常见错误
React Native 是当今最常用的 JavaScript 移动框架之一.React Native 使熟悉 JavaScript 和 React Web 框架的开发人员能够使用类似的方法和原理开发 ...
如何在React Native中使用react-navigation 5处理导航
React-navigation is the navigation library that comes to my mind when we talk about navigation in Re ...

React Native中一些常用组件用法

React Native中一些常用组件用法相关推荐

最新文章

热门文章