目录
- View 视图
import {View} from 'react-native';
实例1
class ViewColoredBoxesWithText extends Component {
render() {
return (
<View
style={{
flexDirection: "row",
height: 100,
padding: 20
}}
>
<View style={{ backgroundColor: "blue", flex: 0.3 }} />
<View style={{ backgroundColor: "red", flex: 0.5 }} />
</View>
);
}
}
响应事件nativeEvent
changedTouches - 从上一次事件以来的触摸事件数组。
identifier - 触摸事件的 ID。
locationX - 触摸事件相对元素位置的 X 坐标。
locationY - 触摸事件相对元素位置的 Y 坐标。
pageX - 触摸事件相对根元素位置的 X 坐标。
pageY - 触摸事件相对根元素位置的 Y 坐标。
target - 接收触摸事件的元素 ID.
timestamp - 触摸事件的时间标记，用来计算速度.
touches - 屏幕上所有当前触摸事件的数组.
属性
style
样式
backgroundColor
opacity
borderColor、borderLeftColor 、borderRightColor、borderTopColor、borderBottomColor、borderStartColor、borderEndColor
borderRadius 、borderBottomLeftRadius、borderBottomRightRadius、borderBottomStartRadius、borderBottomEndRadius、borderTopEndRadius、borderTopLeftRadius、borderTopRightRadius、borderTopStartRadius
borderWidth、borderTopWidth 、borderBottomWidth、borderLeftWidth、borderRightWidth
backfaceVisibility('visible', 'hidden')
borderStyle('solid', 'dotted', 'dashed')
[iOS]shadowColor阴影色、shadowOffset 阴影偏移量object: {width: number,height: number}、shadowOpacity阴影不透明度 (乘以颜色的alpha分量)、shadowRadius阴影模糊半径
[Android]elevation使用Android原生的 elevation API来设置视图的高度。这样可以为视图添加一个投影，并且会影响视图层叠的顺序。此属性仅支持Android5.0及以上版本。
hitSlop
设置在距离视图多远以内可以触发触摸事件。
建议触摸目标至少要 30-40 点/密度-独立像素。例如，一个可触摸的视图有 20 单位高，那么设置hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}则可触摸高度会扩展到 40 单位。
触摸范围不会扩展到父视图之外。
两个重叠的视图，Z-index高的优先。
object: {top: number, left: number, bottom: number, right: number}
onMagicTap
当 accessible 为 true 时，如果用户做了一个双指轻触(Magic tap)手势，系统会调用
pointerEvents
用于控制当前视图是否可以作为触控事件的目标。
auto：可以。
none：不可以。
box-none：视图自身不能作为触控事件的目标，但其子视图可以。类似于你在 CSS 中这样设置:
.box-none {
pointer-events: none;
}
.box-none * {
pointer-events: all;
}
box-only:视图自身可以作为触控事件的目标，但其子视图不能。类似于你在 CSS 中这样设置:
.box-only {
pointer-events: all;
}
.box-only * {
pointer-events: none;
}
removeClippedSubviews
子视图必须有样式 overflow: hidden。
onLayout
加载组件完毕后或布局变化时调用
类型：function。 参数为{nativeEvent: { layout: {x, y, width, height}}}
onStartShouldSetResponder
是否要响应touchStart事件。
类型：function。 (event) => [true | false]
onMoveShouldSetResponder
是否响应touchMove 事件。
类型：function。 (event) => [true | false]
onStartShouldSetResponderCapture
是否阻止子视图响应touchStart 事件。
类型：function。(event) => [true | false]
onMoveShouldSetResponderCapture
是否阻止子视图响应touchMove 事件。
类型：function。 (event) => [true | false]
onResponderGrant
开始响应触摸事件时调用。此时需要高亮告诉用户正在响应。
类型：function。(event) => {}
onResponderMove
手指移动时调用。
类型：function。 (event) => {}
onResponderRelease
在整个触摸事件结束时调用。
类型：function。 (event) => {}
onResponderReject
有一个响应器正处于活跃状态，并且不会向另一个要求响应这个事件的视图释放这个事件。
类型：function。 (event) => {}
onResponderTerminate
响应被从这个视图上“劫走”了。可能是在调用了 onResponderTerminationRequest 之后，被另一个视图“劫走”了, 也可能是由于 OS 无条件终止了响应
类型：function。 (event) => {}
onResponderTerminationRequest
其他某个视图想要成为事件的响应者，并要求这个视图放弃对事件的响应时，就会调用这个函数。如果允许释放响应，就返回true。
类型：function。 (event) => {}
accessible
是否启用无障碍功能。
默认情况下，所有可触摸操作的元素都开启无障碍功能。
onAccessibilityTap
当 accessible 为 true 时，如果用户对一个已选中的无障碍元素做了一个双击手势时，系统会调用此函数。
accessibilityHint
辅助功能提示有助于用户了解当他们对辅助功能元素执行操作时，如果从辅助功能标签上看不到结果，将会发生什么。
accessibilityLabel
设置当用户与此元素交互时，“读屏器”（对视力障碍人士的辅助功能）阅读的文字。默认情况下，这个文字会通过遍历所有的子元素并累加所有的文本标签来构建。
accessibilityRole
'none' - The element has no role.
'button' - The element should be treated as a button.
'link' - The element should be treated as a link.
'header' - The element is a header that divides content into sections.
'search' - The element should be treated as a search field.
'image' - The element should be treated as an image.
'key' - The element should be treated like a keyboard key.
'text' - The element should be treated as text.
'summary' - The element provides app summary information.
'imagebutton' - The element has the role of both an image and also a button.
'adjustable' - The element allows adjustment over a range of values.
accessibilityStates
告诉屏幕阅读器将当前关注的元素视为处于特定状态。状态必须通过数组传入
selected 元素处于选定状态
disabled 元素处于禁用状态
accessibilityLiveRegion
[Android]告知无障碍服务当此视图更新时，是否要通知用户。只对 Android API >= 19 的设备有效。可用的值为:
'none' - 无障碍服务不应该通知.
'polite'- 无障碍服务应该通知.
'assertive' - 无障碍服务应该打断当前的播报然立即通知用户.
accessibilityTraits
[iOS]为读屏器提供更多属性。除非在元素里指定，默认情况下不提供任何属性。
你可以提供单个特性或者用数组指定多个特性
可用的AccessibilityTraits值:
'none' - 元素没有特性。
'button' - 元素应该被当作按钮。
'link' - 元素应该被当作链接。
'header' - 元素是分段的头部.
'search' - 元素应该被当作搜索字段。
'image' - 元素被当作图片。
'selected' - 元素被当作选择框。
'plays' - 元素播放声音。
'key' - 元素应该像键盘上的一个按键一样对待。
'text' - 元素应该像文本一样对待。
'summary' - 元素提供 app 摘要信息。
'disabled' - 元素失效了。
'frequentUpdates' - 元素频繁的更改它的值。
'startsMedia' - 元素开启了一个媒体会话。
'adjustable' - 元素允许范围值调节。
'allowsDirectInteraction' -元素允许语音辅助用户直接触摸。
'pageTurn' - 当读完元素内容时通知语音辅助用户应该跳转到下一页。
accessibilityViewIsModal
[iOS]指示语音辅助是否应该忽略视图中接收者的兄弟元素。默认为false.
accessibilityElementsHidden
[iOS]无障碍元素是否被隐藏。默认为false.
accessibilityIgnoresInvertColors
[iOS]是否忽略颜色反转
nativeID
用来从原生类定位这个视图。
这个设置关闭了视图的'layout-only view removal'优化
testID
用来在端到端测试中定位这个视图。
这个设置关闭了视图的'layout-only view removal'优化。
collapsable
[Android]如果一个 View 只用于布局它的子组件，则它可能会为了优化而从原生布局树中移除。 把此属性设为 false 可以禁用这个优化，以确保对应视图在原生结构中存在。
importantForAccessibility
[Android]控制一个视图在无障碍功能中有多重要：它是否产生一个辅助功能事件，以及它是否能被请求屏幕内容的无障碍服务知晓。只对 Android 平台生效。
可用的值:
'auto' - 系统来决定这个视图对于辅助功能是否重要 - 默认(推荐)。
'yes' - 这个视图对于辅助功能而言重要。
'no' - 这个视图对辅助功能不重要。
'no-hide-descendants' - 这个视图，以及所有的后代视图，都对于辅助功能不重要。
needsOffscreenAlphaCompositing
[Android]决定这个视图是否要先离屏渲染再进行半透明度处理，来确保颜色和混合效果正确。默认值(false)会在渲染组件和它的所有子节点的时候直接应用透明通道，而不会先离屏渲染整个组件再将它附加一个透明通道后渲染到屏幕上。有时候当你给视图设置了一个透明度，且其中有较多元素层叠在一起的时候，默认的设置就会导致看起来不太正常（会比正常显得更加不透明）。
为了正确的透明表现而进行离屏渲染会带来极大的开销，而且对于非原生开发者来说很难调试。这就是为啥它被默认关闭。如果你需要在一个动画中启用这个属性，考虑与 renderToHardwareTextureAndroid 组合使用，前提是视图的内容不会发生变化（即：它不需要每帧重绘一次）。如果开启了 renderToHardwareTextureAndroid，则视图只会离屏渲染一次之后保存为一个硬件纹理，然后以正确的透明度绘制到屏幕上，这样就不会导致 GPU 频繁切换渲染目标（GPU 切换渲染目标会带来极大的开销）。
renderToHardwareTextureAndroid
[Android]决定这个视图是否要把它自己（以及所有的子视图）渲染到一个 GPU 上的硬件纹理中。
在 Android 上，这对于只修改不透明度、旋转、位移、或缩放的动画和交互十分有用：在这些情况下，视图不必每次都重新绘制，显示列表也不需要重新执行。纹理可以被重用于不同的参数。负面作用是这会大量消耗显存，所以当交互/动画结束后应该把此属性设置回 false。
shouldRasterizeIOS
[iOS]决定这个视图是否需要在被混合之前绘制到一个位图上。
在 iOS 上，这对于不会修改组件和子视图尺寸的动画和交互十分有用。举例来说，当我们移动一个静态视图的位置的时候，预渲染允许渲染器重用一个缓存了静态视图的位图，并快速合成。
预渲染会产生一个离屏的渲染过程，并且位图会消耗内存。所以使用此属性需要进行充分的测试和评估
- Button 按钮
import {Button} from 'react-native';
如果想高度自定制，使用TouchableOpacity或TouchableNativeFeedback。
例1
import React, {Component} from 'react';
import {
StyleSheet,
View,
Button,
Alert
} from 'react-native';
type Props = {};
export default class ButtonPage extends Component<Props> {
_onPressButton() {
Alert.alert('tapped the button!')
}
render() {
return(
<View style={{marginTop:20,marginHorizontal:10}}>
<View style={styles.clickButtonStyle}>
<Button title="单击" color="green" onPress={buttonClick}/>
</View>
<Button title="单击" onPress={() => {
Alert.alert("World");
}}/>
<Button
onPress={this._onPressButton}
title="单击"
color="#841584"
/>
</View>
);
};
}
const buttonClick = () => {
Alert.alert("Hello");
};
const styles = StyleSheet.create({
clickButtonStyle: {
margin: 10,
height: 40,
backgroundColor: '#E6E6FA',
borderRadius: 10,
borderWidth: 1,
borderColor: '#7FFF00',
},
});
属性
title
按钮文本（必填）
onPress：
点击时调用（必填）
color
文本颜色
disabled
是否不可交互
accessibilityLabel
读屏应用会读取（残障人士专用）
testID
用来在端到端测试中定位此视图
- TouchableHighlight 用来封装可触摸视图
import {TouchableHighlight} from 'react-native';
1、按下时变色。
2、只支持一个子节点（不能没有子节点也不能多于一个）。
例1
import React, { Component } from 'react'
import {
AppRegistry,
StyleSheet,
TouchableHighlight,
Text,
View,
} from 'react-native'
class App extends Component {
constructor(props) {
super(props)
this.state = { count: 0 }
}
onPress = () => {
this.setState({
count: this.state.count+1
})
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight
style={styles.button}
onPress={this.onPress}
>
<Text> Touch Here </Text>
</TouchableHighlight>
<View style={[styles.countContainer]}>
<Text style={[styles.countText]}>
{ this.state.count !== 0 ? this.state.count: null}
</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10
},
countContainer: {
alignItems: 'center',
padding: 10
},
countText: {
color: '#FF00FF'
}
})
AppRegistry.registerComponent('App', () => App)
属性
style
样式
underlayColor
触摸时显示的底层色
activeOpacity
触摸时的透明度（0到1之间，默认值为0.85）。
onHideUnderlay
底层色隐藏时调用
onShowUnderlay
底层色显示时调用
hasTVPreferredFocus
[iOS Apple TV only]电视首选焦点
tvParallaxProperties
[iOS Apple TV only]是否启用Apple TV视差效果，默认为true。
shiftDistanceX: Defaults to 2.0. shiftDistanceY: Defaults to 2.0. tiltAngle: Defaults to 0.05. magnification: Defaults to 1.0. pressMagnification: Defaults to 1.0. pressDuration: Defaults to 0.3. pressDelay: Defaults to 0.0.
- TouchableOpacity 用来封装可触摸视图
import {TouchableOpacity} from 'react-native';
按下时变暗（降低透明度，不改变背景色）。
例1
import React, { Component } from 'react'
import {
AppRegistry,
StyleSheet,
TouchableOpacity,
Text,
View,
} from 'react-native'
class App extends Component {
constructor(props) {
super(props)
this.state = { count: 0 }
}
onPress = () => {
this.setState({
count: this.state.count+1
})
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={this.onPress}
>
<Text> Touch Here </Text>
</TouchableOpacity>
<View style={[styles.countContainer]}>
<Text style={[styles.countText]}>
{ this.state.count !== 0 ? this.state.count: null}
</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10
},
countContainer: {
alignItems: 'center',
padding: 10
},
countText: {
color: '#FF00FF'
}
})
AppRegistry.registerComponent('App', () => App)
属性
style
样式
activeOpacity
触摸时的透明度（0到1之间，默认值为0.2）。
hasTVPreferredFocus
[iOS Apple TV only]电视首选焦点
tvParallaxProperties
[iOS Apple TV only]是否启用Apple TV视差效果，默认为true。
shiftDistanceX: Defaults to 2.0. shiftDistanceY: Defaults to 2.0. tiltAngle: Defaults to 0.05. magnification: Defaults to 1.0. pressMagnification: Defaults to 1.0. pressDuration: Defaults to 0.3. pressDelay: Defaults to 0.0.
方法
setOpacityTo((value: number), (duration: number));
设置不透明度（伴有过渡动画）
- TouchableWithoutFeedback (不建议使用，没有视觉反馈)
import {TouchableWithoutFeedback} from 'react-native';
只支持一个子节点（不能没有子节点也不能多于一个）。
属性
disabled
是否禁用交互
hitSlop
定义了按钮的外延范围。 注意： 触摸范围不会超过父视图的边界，也不会影响原先和本组件层叠的视图（保留原先的触摸优先级）。
object: {top: number, left: number, bottom: number, right: number}
pressRetentionOffset
[在当前视图不能滚动的前提下] 决定当手指移开多远距离之后，会不再激活按钮。但如果手指再次移回范围内，按钮会被再次激活。
object: {top: number, left: number, bottom: number, right: number}
delayPressIn
从触摸操作开始到onPressIn被调用的延迟。单位是毫秒
delayPressOut
从触摸操作结束开始到onPressOut被调用的延迟。单位是毫秒
delayLongPress
从onPressIn开始，到onLongPress被调用的延迟。单位是毫秒.
onPressIn
手指按下后调用
onPressOut
手指抬起后调用
onPress
点击后调用
onLongPress
长按后调用
onFocus
获焦后调用
onBlur
失焦后调用
onLayout
当加载或者布局改变的时候被调用，参数为：{nativeEvent: {layout: {x, y, width, height}}}
testID
一个唯一的资源标识符，用来在自动测试脚本中标识这个元素。
accessible
accessibilityLabel
覆盖用户与元素交互时屏幕阅读器读取的文本。默认情况下，标签是通过遍历所有子级并累积由空间分隔的所有文本节点来构造的。
accessibilityTraits
accessibilityStates
accessibilityRole
accessibilityHint
辅助功能提示有助于用户了解当他们对辅助功能元素执行操作时，如果从辅助功能标签上看不到结果，将会发生什么。
- Image 图片
import {Image} from 'react-native';
对于网络和 base64 数据的图片需要手动指定尺寸
例1
import React, { Component } from 'react';
import { AppRegistry, View, Image } from 'react-native';
export default class DisplayAnImage extends Component {
render() {
return (
<View>
<Image
source={require('/react-native/img/favicon.png')}
/>
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>
<Image
style={{width: 66, height: 58}}
source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
/>
</View>
);
}
}
默认情况下 Android 是不支持 GIF 和 WebP 格式的。你需要在android/app/build.gradle文件中根据需要手动添加以下模块：
dependencies {
// 如果你需要支持Android4.0(API level 14)之前的版本
compile 'com.facebook.fresco:animated-base-support:1.10.0'
// 如果你需要支持GIF动图
compile 'com.facebook.fresco:animated-gif:1.10.0'
// 如果你需要支持WebP格式，包括WebP动图
compile 'com.facebook.fresco:animated-webp:1.10.0'
compile 'com.facebook.fresco:webpsupport:1.10.0'
// 如果只需要支持WebP格式而不需要动图
compile 'com.facebook.fresco:webpsupport:1.10.0'
}
属性
style
borderTopRightRadius: number
backfaceVisibility: enum('visible', 'hidden')
borderBottomLeftRadius: number
borderBottomRightRadius: number
borderColor: color
borderRadius: number
borderTopLeftRadius: number
backgroundColor: color
borderWidth: number
opacity: number
overflow: enum('visible', 'hidden')
resizeMode: Object.keys(ImageResizeMode)
tintColor: color
为所有非透明的像素指定一个颜色。
overlayColor: string (Android)
当图片有圆角的时候，指定一个颜色用于填充圆角处的空白。虽然一般情况下圆角处是透明的，但在某些情况下，Android 并不支持圆角透明，比如：
某些 resize 模式比如'contain'
GIF 动画
常见的用法就是在不能圆角透明时，设置`overlayColor`和背景色一致。
blurRadius
为图片添加一个指定半径的模糊滤镜
source
图片源。URL 地址或本地数据。
目前原生支持的图片格式有png、jpg、jpeg、bmp、gif、webp (仅 Android)、psd (仅 iOS)
loadingIndicatorSource
用于在图片准备加载前呈现图像加载指示器的资源。类似source
defaultSource
占位图
iOS参数：object, number
Android参数：number。 debug下无效（但在release版本中会生效）
object格式{uri: string, width: number, height: number, scale: number}
uri - 是一个表示图片的资源标识的字符串，它可以是一个本地文件路径或是一个静态资源引用（使用require(相对路径)来引用）。
width, height - 会被用作<Image/>组件的默认尺寸。
scale - 图片的缩放系数。默认是 1.0，意味着每一个图片像素都对应一个设备独立像素（DIP）。
number - 静态图片引用语法require('./image.jpg')所返回的资源 id
resizeMode
缩放Mode，有以下几种
1、cover: 保持宽高比,可能剪裁
2、contain: 保持宽高比,可能有留白
3、stretch: 不按比例拉伸，直到宽高都刚好填满容器。
4、repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸，但是当尺寸超过容器时会在保持宽高比的前提下缩放到能被容器包裹。
5、center: 居中不拉伸。
onLayout
当元素加载或者布局改变的时候调用，参数为：{nativeEvent: {layout: {x, y, width, height}}}.
onLoadStart
加载开始时调用
onLoad
加载成功后调用
onLoadEnd
加载结束后调用（不论成功还是失败）
onError
加载出错时调用，参数为{nativeEvent: {error}}。
onPartialLoad
[iOS]如果图片本身支持逐步加载，则逐步加载的过程中会调用此方法。
onProgress
[iOS]在加载过程中不断调用，参数为{nativeEvent: {loaded, total}}
testID
一个唯一的资源标识符，用来在自动测试脚本中标识这个元素。
resizeMethod
[Android]缩放Mode
auto: 使用启发式算法来在resize和scale中自动决定。
resize: 在图片解码之前，使用软件算法对其在内存中的数据进行修改。当图片尺寸比容器尺寸大得多时，应该优先使用此选项。
scale: 对图片进行缩放。和resize相比，scale速度更快（一般有硬件加速），而且图片质量更优。在图片尺寸比容器尺寸小或者只是稍大一点时，应该优先使用此选项。
accessibilityLabel
[iOS]设置一段文字。当用户与图片交互时，读屏器（无障碍功能）会朗读你所设置的这段文字。
accessible
[iOS]此图片是否启用了无障碍功能
capInsets
[iOS]当图片被缩放的时候，capInsets 指定的角上的尺寸会被固定而不进行缩放，而中间和边上其他的部分则会被拉伸。
object: {top: number, left: number, bottom: number, right: number}
fadeDuration
[仅支持Android]默认300ms
progressiveRenderingEnabled
[仅支持Android]是否启用渐进式JPEG流
方法
getSize(uri, success, [failure])
在显示图片前获取图片的宽高(以像素为单位)。
如果图片地址不正确或下载失败,此方法失败。
不能用于静态图片资源。
prefetch(url)
预加载一个远程图片(将其下载到本地磁盘缓存)
abortPrefetch(requestId)
[仅支持Android] 中断预加载操作。
queryCache(urls)
查询图片缓存状态
"disk"（缓存在磁盘文件中）或是"memory"（缓存在内存中）
resolveAssetSource({ uri: '<http location || file path>' })
将资源引用解析为具有属性uri、宽度和高度的对象
- ImageBackground 背景图像
import {ImageBackground} from 'react-native';
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
说明：
必须设置宽高
属性：
和Image有相同的属性
style
样式
imageStyle
imageRef
- Text 文本
import { Text } from 'react-native';
例1
import React, { Component } from 'react';
import { Text, StyleSheet } from 'react-native';
export default class TextInANest extends Component {
constructor(props) {
super(props);
this.state = {
titleText: "Bird's Nest",
bodyText: 'This is not really a bird nest.'
};
}
render() {
return (
<Text style={styles.baseText}>
<Text style={styles.titleText} onPress={this.onPressTitle}>
{this.state.titleText}{'\n'}{'\n'}
</Text>
<Text numberOfLines={5}>
{this.state.bodyText}
</Text>
</Text>
);
}
}
const styles = StyleSheet.create({
baseText: {
fontFamily: 'Cochin',
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
},
});
说明：
{'\n'} 回车
复杂文本：使用嵌套实现
限iOS：可嵌套指定宽高的View
在Text内部的元素不再使用flexbox布局，而是采用文本布局，行末换行。
文本必须放在Text中，View下不能直接放文本
推荐创建多个自定义组件，来格式化文本。不推荐直接格式化整个子树。
属性
style
textShadowOffset: object: {width: number,height: number}
textShadowColor:color
textShadowRadius: number
color: color
lineHeight: number
fontSize: number
fontStyle: enum('normal', 'italic')
fontFamily: string
fontWeight: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
指定字体的粗细。大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持，则会自动选择最接近的值。
textAlign: enum('auto', 'left', 'right', 'center', 'justify')
指定文本的对齐方式。其中'justify'值仅iOS支持，在Android上会变为`left`。
textDecorationLine: enum('none', 'underline', 'line-through', 'underline line-through')
includeFontPadding: bool (*Android*)
Android在默认情况下会为文字额外保留一些padding，以便留出空间摆放上标或是下标的文字。对于某些字体来说，这些额外的padding可能会导致文字难以垂直居中。如果你把`textAlignVertical`设置为`center`之后，文字看起来依然不在正中间，那么可以尝试将本属性设置为`false`。默认值为true。
textAlignVertical: enum('auto', 'top', 'bottom', 'center') (*Android*)
fontVariant: array of enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums') (*iOS*)
letterSpacing: number
textDecorationColor: color](*iOS*)
textDecorationStyle: enum('solid', 'double', 'dotted', 'dashed') (*iOS*)
textTransform: enum('none', 'uppercase', 'lowercase', 'capitalize')
writingDirection: enum('auto', 'ltr', 'rtl') (*iOS*)
selectable
文本是否可选
numberOfLines
行数
ellipsizeMode
省略Mode,有以下几种
head - 截取头部显示省略号。例如： "...efg"
middle - 截取中间显示省略号。例如： "ab...yz"
tail - 默认截取尾部显示省略号。例如： "abcd..."
clip - 不显示省略号，直接从尾部截断
allowFontScaling
控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为true。
accessibilityHint
accessibilityLabel
accessible
默认：true
onLayout
在加载时或者布局变化以后调用，参数如下：{nativeEvent: {layout: {x, y, width, height}}}
onLongPress
当文本被长按以后调用
onPress
当文本被点击以后调用
pressRetentionOffset
nativeID
testID
用来在端到端测试中定位此视图
disabled
[Android]不可交互
selectionColor
[Android]高亮color
textBreakStrategy
[Android]设置文本中断策略.simple、highQuality(默认)、 balanced
suppressHighlighting
[iOS]设为true时，当文本被按下会没有任何视觉效果。默认情况下，文本被按下时会有一个灰色的、椭圆形的高光。
adjustsFontSizeToFit
[iOS]指定字体是否随着给定样式的限制而自动缩放。
minimumFontScale
[iOS]当adjustsFontSizeToFit开启时，指定最小的缩放比（即不能低于这个值）。可设定的值为0.01 - 1.
- TextInput 文本输入
import { TextInput } from 'react-native';
例1
import React, { Component } from 'react';
import { TextInput } from 'react-native';
export default class UselessTextInput extends Component {
constructor(props) {
super(props);
this.state = { text: 'Useless Placeholder' };
}
render() {
return (
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
);
}
}
说明：
注意有些属性仅在multiline为true或者为false的时候有效。此外，当multiline=false时，为元素的某一个边添加边框样式（例如：borderBottomColor，borderLeftWidth等）将不会生效。为了能够实现效果你可以使用一个View来包裹TextInput
在安卓上默认有一个底边框，同时会有一些padding。如果要想使其看起来和iOS上尽量一致，则需要设置`padding: 0`，同时设置`underlineColorAndroid="transparent"`来去掉底边框。
在安卓上如果设置`multiline = {true}`，文本默认会垂直居中，可设置`textAlignVertical: 'top'`样式来使其居顶显示。
在安卓上长按选择文本会导致`windowSoftInputMode`设置变为`adjustResize`，这样可能导致绝对定位的元素被键盘给顶起来。要解决这一问题你需要在AndroidManifest.xml中明确指定合适的`windowSoftInputMode`值，或是自己监听事件来处理布局变化。
属性
placeholder
提示文本
placeholderTextColor
提示文本颜色
value
文本框中的文本。有些情况下会导致一些闪烁现象。
defaultValue
初始值
multiline
是否多行。默认值为false。
注意安卓上如果设置multiline = {true}，文本默认会垂直居中，可设置textAlignVertical: 'top'样式来使其居顶显示。
numberOfLines
行数(multiline设置为true)。
maxLength
限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现，可以避免闪烁的现象。
secureTextEntry
是否开启安全。默认值为false。multiline={true}时不可用。
keyboardType
键盘类型
default
number-pad
decimal-pad
numeric
email-address
phone-pad
仅iOS可用：
ascii-capable
numbers-and-punctuation
url
name-phone-pad
twitter
web-search
仅Android可用：
visible-password
returnKeyType
键盘确认按钮文本
done
go
next
search
send
仅Android可用：
none
previous
仅iOS可用：
default
emergency-call
google
join
route
yahoo
onChangeText
文本内容发生变化时调用。参数为新文本。
onChange
文本内容发生变化时调用。参数为事件，{ nativeEvent: { eventCount, target, text} }。
onSubmitEditing
按下提交按钮时调用。如果multiline={true}，此属性不可用。
onSelectionChange
长按选择文本时，选择范围变化时调用此函数，传回参数的格式形如{ nativeEvent: { selection: { start, end } } }。
onScroll
在内容滚动时持续调用，传回参数的格式形如{ nativeEvent: { contentOffset: { x, y } } }。也可能包含其他和滚动事件相关的参数，但是在Android上，出于性能考虑，不会提供contentSize参数。
onLayout
当组件加载或者布局变化的时候调用，回调参数为{ nativeEvent: {layout: {x, y, width, height}, target } }。
onKeyPress
当一个键被按下的时候调用此回调。传递给回调函数的参数为{ nativeEvent: { key: keyValue } }，其中keyValue即为被按下的键。会在onChange之前调用。注意：在Android上只有软键盘会触发此事件，物理键盘不会触发。
onFocus
获得焦点时调用。回调参数为{ nativeEvent: { target } }。
onBlur
失去焦点时调用
onEndEditing
当文本输入结束后调用。
onContentSizeChange
{ nativeEvent: { contentSize: { width, height } } }
allowFontScaling
控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为true。
autoCapitalize
控制是否要自动将特定字符切换为大写.不支持某些键盘类型：name-phone-pad
characters: 所有的字符。
words: 每个单词的第一个字符。
sentences: 每句话的第一个字符（默认）。
none: 不切换。
editable
是否可编辑，默认值为true。
caretHidden
如果为true，则隐藏光标。默认值为false。
autoCorrect
是否拼写自动修正。默认值是true。
autoFocus
如果为true，在componentDidMount后会获得焦点。默认值为false。
selectionColor
设置输入框高亮时的颜色（还包括光标）。
selection
设置选中文字的范围（指定首尾的索引值）。如果首尾为同一索引位置，则相当于指定光标的位置。
object: {start: number,end: number}
selectTextOnFocus
获取焦点时，是否选中所有文字
blurOnSubmit
如果为true，文本框会在提交的时候失焦。对于单行输入框默认值为true，多行则为false。注意：对于多行输入框来说，如果将blurOnSubmit设为true，则在按下回车键时就会失去焦点同时触发onSubmitEditing事件，而不会换行。
contextMenuHidden
默认值：false
keyboardAppearance
[iOS]键盘的颜色
scrollEnabled
[iOS]是否可滚动。
selectionState
[iOS]控制一个文档中哪段文字被选中的状态
blur()
focus()
update()
dataDetectorTypes
设置 text input 内能被转化为可点击URL的数据的类型。当且仅当multiline={true}和editable={false}时起作用。默认情况下不检测任何数据类型
'phoneNumber'
'link'
'address'
'calendarEvent'
'none'
'all'
spellCheck
[iOS]如果设置为false，则禁用拼写检查的样式（比如错误拼写的单词下的红线）。默认值继承自autoCorrect。
clearButtonMode
[iOS]是否要在文本框右侧显示“清除”按钮。仅在单行模式下可用。默认值为never。
clearTextOnFocus
[iOS]是否插入时清空
returnKeyLabel
[Android]键盘确认按钮文本
autoComplete
[Android]自动匹配
off
username
password
email
name
tel
street-address
postal-code
cc-number
cc-csc
cc-exp
cc-exp-month
cc-exp-year
enablesReturnKeyAutomatically
[iOS]
如果为true，键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。
textContentType
[iOS]
none
URL
addressCity
addressCityAndState
addressState
countryName
creditCardNumber
emailAddress
familyName
fullStreetAddress
givenName
jobTitle
location
middleName
name
namePrefix
nameSuffix
nickname
organizationName
postalCode
streetAddressLine1
streetAddressLine2
sublocality
telephoneNumber
username
password
newPassword
oneTimeCode
style
borderLeftWidth
borderTopWidth
borderRightWidth
borderBottomWidth
borderTopLeftRadius
borderTopRightRadius
borderBottomRightRadius
borderBottomLeftRadius
disableFullscreenUI
[Android]当值为false时, 如果 text input 的周围有少量可用空间的话（比如说，当手机横过来时），操作系统可能会将这个 text input 设置为全屏模式。当值为true时, 这个特性不可用，text input 就是普通的模式。默认为false。
inlineImageLeft
[Android]指定一个图片放置在左侧。图片必须放置在/android/app/src/main/res/drawable目录下，使用时无需路径和后缀
inlineImagePadding
[Android]给放置在左侧的图片设置padding样式。
textBreakStrategy
[Android]设置文字断行策略, 可能值有simple, highQuality, balanced。默认值为simple
underlineColorAndroid
[Android]文本框的下划线颜色。想去掉则设为透明transparent。
方法
clear()
清空输入框的内容
isFocused()
是否获取焦点
- Switch 开关
import { Switch } from 'react-native';
必须使用onValueChange回调来更新value属性以响应用户的操作
属性
disabled
是否禁用交互
value
是否开启。默认为false
thumbColor
圆形按钮的背景颜色。在iOS上设置此颜色会丢失按钮的投影。
trackColor
背景颜色
object: {false: color, true: color}
onValueChange
当值改变的时候调用此回调函数，参数为新的值
ios_backgroundColor
iOS关闭时的背景颜色
testID
用来在端到端测试中定位此视图。
- Slider 滑块
import { Slider } from 'react-native';
属性
style
样式
disabled
是否可交互，默认：false
value
滑块的初始值。介于最小值和最大值之间。默认值是0。
minimumValue
滑块的最小值。默认为0。
maximumValue
滑块的最大值。默认为1。
step
滑块的步长。介于最小值和最大值之间。默认值是0。
onValueChange
在用户拖动滑块的过程中不断调用
onSlidingComplete
用户松开滑块的时候调用此回调，无论值是否变化。回调值为当前值
minimumTrackTintColor
左侧条填充色。在iOS上默认为一个灰色的渐变色。
maximumTrackTintColor
右侧条填充色。在iOS上默认为一个灰色的渐变色。
trackImage
[iOS]背景图片
只支持静态图片。图片最中央的像素会被平铺直至填满轨道。
thumbImage
[iOS]滑块背景图片
只支持静态图片。
minimumTrackImage
[iOS]左边条背景图片
仅支持静态图片。图片最右边的像素会被平铺直至填满左侧轨道。
maximumTrackImage
[iOS]右边条背景图片
仅支持静态图片。图片最左边的像素会被平铺直至填满右侧轨道。
thumbTintColor
[Android]滑块填充色
testID
用来在端到端测试中定位此视图。
- KeyboardAvoidingView
import { KeyboardAvoidingView } from 'react-native';
避免弹出的键盘挡住当前的视图
import { KeyboardAvoidingView } from 'react-native';
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
... 在这里放置需要根据键盘调整位置的组件 ...
</KeyboardAvoidingView>
enabled
是否启用KeyboardAvoidingView。默认为true。
behavior
Android 可能不指定此属性更好，而 iOS 可能相反。
enum('height', 'position', 'padding')
keyboardVerticalOffset
- Modal 用于覆盖其他组件
import { Modal } from "react-native";
例1
import React, { Component } from "react";
import { Modal, Text, TouchableHighlight, View } from "react-native";
export default class ModalExample extends Component {
state = {
modalVisible: false
};
setModalVisible(visible) {
this.setState({ modalVisible: visible });
}
render() {
return (
<View style={{ marginTop: 122 }}>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
alert("Modal has been closed.");
}}
>
<View style={{ marginTop: 122 }}>
<View>
<Text>Hello World!</Text>
<TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}
>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableHighlight
onPress={() => {
this.setModalVisible(true);
}}
>
<Text>Show Modal</Text>
</TouchableHighlight>
</View>
);
}
}
属性
visible
决定 modal 是否显示
animationType
modal 的动画类型。有以下几种
slide 从底部滑入滑出。
fade 淡入淡出。
none 没有动画，直接蹦出来。默认
transparent
指背景是否透明，默认为白色。将这个属性设为：true 的时候弹出一个透明背景层的modal。
onShow
modal 显示时调用
hardwareAccelerated
[Android]是否强制启用硬件加速来绘制弹出层
onRequestClose
[Android/TV]用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。请务必注意本属性在 Android 平台上为必填，且会在 modal 处于开启状态时阻止BackHandler事件。
supportedOrientations
[iOS]支持的方向。在 iOS 上，除了本属性外，还会受到应用的 Info.plist 文件中UISupportedInterfaceOrientations的限制。如果还设置了presentationStyle属性为pageSheet或formSheet，则在 iOS 上本属性将被忽略。
'portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'
onDismiss
[iOS] modal被关闭时调用
onOrientationChange
[iOS] modal显示时，当设备方向发生更改时调用。初始渲染时调用。
presentationStyle
[iOS]决定 modal（在较大屏幕的设备比如 iPad 或是 Plus 机型）如何展现
fullScreen完全盖满屏幕。
pageSheet竖直方向几乎盖满，水平居中，左右留出一定空白（仅用于大屏设备）。
formSheet竖直和水平都居中，四周都留出一定空白（仅用于大屏设备）。
overFullScreen完全盖满屏幕，同时允许透明。
默认会根据transparent属性而设置为overFullScreen或是fullScreen。
- Picker 选择器
import { Picker } from "react-native";
例1
<Picker
selectedValue={this.state.language}
style={{ height: 50, width: 100 }}
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
属性
onValueChange
某一项被选中时执行此回调。调用时带有如下参数：
itemValue: 被选中项的value属性
itemPosition: 被选中项在picker中的索引位置
selectedValue
默认选中的值。可以是字符串或整数。
style
格式。pickerStyleType
testID
用于在端对端测试中定位此视图
itemStyle
[iOS]每项style
enabled
[Android]是否可用
mode
[Android]指定在用户点击选择器时，以怎样的形式呈现选项：
'dialog': 显示一个模态对话框。默认选项。
'dropdown': 以选择器所在位置为锚点展开一个下拉框
prompt
[Android]设置选择器的提示字符串。在Android的对话框模式中用作对话框的标题。
- SafeAreaView
import { SafeAreaView } from "react-native";
SafeAreaView会自动根据系统的各种导航栏、工具栏等预留出空间来渲染内部内容。更重要的是，它还会考虑到设备屏幕的局限，比如屏幕四周的圆角或是顶部中间不可显示的“刘海”区域。
例1
SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
<View style={{ flex: 1 }}>
<Text>Hello World!</Text>
</View>
</SafeAreaView>
- StatusBar 状态栏
import {StatusBar} from 'react-native';
常量
currentHeight (仅限Android)状态栏的当前高度
属性
animated
是否动画显示
barStyle
设置状态栏文本的颜色
'default', 'light-content', 'dark-content'
hidden
是否隐藏状态栏
backgroundColor
[Android]状态栏的背景色
translucent
[Android]指定状态栏是否透明。设置为true时，应用会延伸到状态栏之下绘制（即所谓“沉浸式”）。
networkActivityIndicatorVisible
[iOS]指定是否显示网络活动提示符
showHideTransition
[iOS]通过hidden属性来显示或隐藏状态栏时所使用的动画效果。默认值为'fade'。
'fade', 'slide'
方法
static setHidden(hidden: boolean, [animation]: StatusBarAnimation)
显示／隐藏状态栏。none、fade渐变、slide滑动
static setBarStyle(style: StatusBarStyle, [animated]: boolean)
设置状态栏的样式。default默认的样式（IOS为白底黑字、Android为黑底白字）、light-content黑底白字、dark-content白底黑字（需要Android API>=23）
static setNetworkActivityIndicatorVisible(visible: boolean)
显示／隐藏网络活动指示器
static setBackgroundColor(color: string, [animated]: boolean)
设置状态栏的背景色
static setTranslucent(translucent: boolean)
指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。
- RefreshControl 刷新
import { RefreshControl } from "react-native";
当ScrollView处于竖直方向的起点位置（scrollY: 0），此时下拉会触发一个onRefresh事件。
例1
class RefreshableList extends Component {
constructor(props) {
super(props);
this.state = {
refreshing: false,
};
}
_onRefresh = () => {
this.setState({refreshing: true});
fetchData().then(() => {
this.setState({refreshing: false});
});
}
render() {
return (
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh}
/>
}
...
/>
);
}
...
}
属性
refreshing
视图是否应该在刷新时显示指示器
onRefresh
在视图开始刷新时调用
colors
[Android]指定至少一种颜色用来绘制刷新指示器
enabled
[Android]指定是否要启用刷新指示器
progressBackgroundColor
[Android]指定刷新指示器的背景色
progressViewOffset
[Android]指定刷新指示器的垂直起始位置(top offset)
size
[Android]指定刷新指示器的大小
enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE)
tintColor
[iOS]填充色
title
[iOS]下拉标题
titleColor
[iOS]下拉标题颜色
- ActivityIndicator 菊花
import { ActivityIndicator } from "react-native";
例1
import React, { Component } from 'react'
import {
ActivityIndicator,
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native'
export default class App extends Component {
render() {
return (
<View style={[styles.container, styles.horizontal]}>
<ActivityIndicator size="large" color="#0000ff" />
<ActivityIndicator size="small" color="#00ff00" />
<ActivityIndicator size="large" color="#0000ff" />
<ActivityIndicator size="small" color="#00ff00" />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center'
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 10
}
})
属性
animating：
是否动画，true（默认）、false
color：
颜色
size：
大小，small（默认）、large
hidesWhenStopped：
[iOS]是否停止时隐藏，true（默认）、false
- Alert 弹窗
import { Alert } from "react-native";
对话框会默认仅有一个'确定'按钮。
iOS:
可以指定任意数量的按钮
Android：
最多能指定三个按钮，分别具有“积极态”、“中间态”和“消极态”
默认情况下点击提示框的外面会自动取消提示框，加上参数{ onDismiss: () => {} }处理事件，加上参数{ cancelable: false }阻止消失
例
// iOS和Android上都可用
Alert.alert(
'Alert Title',
'My Alert Msg',
[
{text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
方法
alert()
static alert(title, message?, buttons?, options?, type?)
- Linking 跳转链接
import {Linking} from 'react-native';
仅适用于纯react-native应用
方法
getInitialURL();
如果应用是被一个链接调起的，则会返回相应的链接地址。否则它会返回null
canOpenURL(url);
是否可以跳转指定的 URL
本方法会返回一个Promise对象，当确定传入的 URL 可以被处理时，promise 就会返回，值的第一个参数是表示是否可以打开 URL。
对于 web 链接来说，协议头("http://", "https://")不能省略！
对于 iOS 9 来说，你需要在Info.plist中添加LSApplicationQueriesSchemes字段，否则canOpenURL可能一直返回 false
openURL(url);
跳转到指定的 URL
本方法会返回一个Promise对象。如果用户在弹出的对话框中点击了确认或是 url 自动打开了，则 promise 成功完成。如果用户在弹出的对话框中点击取消或是没有对应应用可以处理此类型的 url，则 promise 会失败。
addEventListener(type, handler);
添加事件处理函数。type 参数应填url
removeEventListener(type, handler);
删除事件处理函数。type 参数应填url
constructor();
<1> 点击链接进行跳转（打开前判断是否可跳转）
Linking.canOpenURL(url).then(supported => {
if (!supported) {
console.log('Can\'t handle url: ' + url);
} else {
return Linking.openURL(url);
}
}).catch(err => console.error('An error occurred', err));
<2> 其他应用调起本应用(应用未启动)
可在任何组件上获取并处理
componentDidMount() {
Linking.getInitialURL().then((url) => {
if (url) {
console.log('Initial url is: ' + url);
}
}).catch(err => console.error('An error occurred', err));
}
Android:
如果要在现有的 MainActivity 中监听传入的 intent，那么需要在AndroidManifest.xml中将 MainActivity 的launchMode设置为singleTask
<activity
android:name=".MainActivity"
android:launchMode="singleTask">
<3> iOS：在 App启动后也监听传入的 App 链接
首先需要在项目中手动链接RCTLinking，
然后需要在AppDelegate.m的didfinishLunching中+
// iOS 9.x 或更高版本
#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}
// iOS 8.x 或更低版本
#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
// 若果使用了通用链接则添加以下代码
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity
restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler
{
return [RCTLinkingManager application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}
最后在任何组件上监听并处理
componentDidMount() {
Linking.addEventListener('url', this._handleOpenURL);
},
componentWillUnmount() {
Linking.removeEventListener('url', this._handleOpenURL);
},
_handleOpenURL(event) {
console.log(event.url);
}
网友评论