- 第1节:React 入门
- 第2节:React 安装 Android 运行环境
- 第3节:React Native 样式
- 第4节:React Native 手势应答系统
- 第5节:React Native 辅助功能
- 第6节:React Native 模块(iOS)
- 第7节:React Native UI 组件(iOS)
- 第8节:React Native UI 组件(Android)
- 第9节:React Native 调试 React Native 应用
- 第10节:React Native 测试
- 第11节:React Native 在设备上运行
- 第12节:React Native 在设备上运行(Android)
- 第13节:React Native 与现有的应用程序集成
- 第14节:React Native JavaScript 环境
- 第15节:React Native 已知 Issues
- 第16节:React Native iOS 活动指示器
- 第17节:React Native iOS 日期选择器
- 第18节:React Native DrawerLayoutAndroid
- 第19节:React Native 图片
- 第20节:React Native 列表视图
- 第21节:React Native Map 视图
- 第22节:React Native 导航器
- 第23节:React Native iOS 导航器
- 第24节:React Native iOS 选择器
- 第25节:React Native ProgressBarAndroid
- 第26节:React Native 滚动视图
- 第27节:React Native iOS 滑块
- 第28节:React Native SwitchAndroid
- 第29节:React Native iOS 开关
- 第30节:React Native iOS 选项卡
- 第31节:React Native TabBarIOS.Item
- 第32节:React Native 文本
- 第33节:React Native 文本输入
- 第34节:React Native ToolbarAndroid
- 第35节:React Native 高亮触摸
- 第36节:React Native 不透明触摸
- 第37节:React Native 无反馈触摸
- 第38节:React Native 视图
- 第39节:React Native Web 视图
- 第40节:React Native iOS 警告
- 第41节:React Native 应用程序注册表
- 第42节:React Native iOS 应用程序状态
- 第43节:React Native 异步存储
- 第44节:React Native BackAndroid
- 第45节:React Native 相机滚动
- 第46节:React Native 交互管理器
- 第47节:React Native 动画布局
- 第48节:React Native iOS 链接
- 第49节:React Native 网络信息
- 第50节:React Native 全景响应器
- 第51节:React Native 像素比率
- 第52节:React Native iOS 推送通知
- 第53节:React Native iOS 状态栏
- 第54节:React Native 样式表
- 第55节:React Native ToastAndroid
- 第56节:React Native iOS 震动
- 第57节:React Native Flexbox
- 第58节:React Native 定位
- 第59节:React Native 网络
- 第60节:React Native 计时器
React Native 视图
创建 UI 最基本的组件,view
是一个容器,它支持 flexbox 布局、风格、一些触发处理,和可访问性控制,它被设计成嵌套在其他视图里,并且有 0 到很多个任意类型的孩子。view
直接映射到原生视图,相当于在任意正在运行的平台上的响应,不管它是 UIView
,<div>
,android.view
,等等。这个例子创建了一个视图,将两个颜色的框和自定义的组件打包填充成一行。
<View style={{flexDirection: 'row', height: 100, padding: 20}}>
<View style={{backgroundColor: 'blue', flex: 0.3}} />
<View style={{backgroundColor: 'red', flex: 0.5}} />
<MyCustomComponent {...customProps} /></View>
为了清晰和性能,视图被设计成与样式表一起使用,尽管是内联样式也同样支持。
工具
Edit on GitHub
accessibilityLabel 字符串型
当用户与元素进行交互时,覆盖通过屏幕阅读器阅读的文本。在默认情况下,标签是通过遍历所有孩子和累积所有由空间隔开的文本节点创建的。
accessible 布尔型
当它的值为真时,说明视图是一个可访问的元素。在默认情况下,所有的可触发的元素都是可以被访问的。
onMoveShouldSetResponder 函数
对于大多数的触发交互,你可能只是想在 TouchableHighlight
或者 TouchableOpacity
里包装你的组件。为了进一步的探讨,检查 Touchable.js
,ScrollResponder.js
和ResponderEventPlugin.js
。
onResponderGrant 函数
onResponderMove 函数
onResponderReject 函数
onResponderRelease 函数
onResponderTerminate 函数
onResponderTerminationRequest 函数
onStartShouldSetResponder 函数
onStartShouldSetResponderCapture 函数
pointerEvents enum('box-none', 'none', 'box-only', 'auto')
缺乏auto
属性,none
更像是 CSS
的 none
值。box-none
就好像你已经应用了 CSS
类:
.box-none { pointer-events: none;
}.box-none * { pointer-events: all;
}
box-only
相当于
.box-only { pointer-events: all;
}.box-only * { pointer-events: none;
}
但是由于 pointerEvents
并不影响布局/外观,通过添加附加模式,我们已经偏离了规范,我们选择在 style
上不包括pointerEvents
。在一些平台上,不管怎样偶们都需要将它作为一个 className
来实现。是否使用 style
时这个平台的实现细节。
removeClippedSubviews 布尔
这是一个通过 RCTView 显示的特定性能属性,当有很多子视图,并且它们大部分都是在幕后,这时被用于滚动内容。为了使这个属性有效,它必须被应用到一个视图中,在这个视图里包含很多子视图和外部约束。子视图中还应该有溢出:隐藏,应该包含视图(或者它的一个子视图)。
style 字体
Flexbox...
backgroundColor 字符串
borderBottomColor 字符串
borderColor 字符串
borderLeftColor 字符串
borderRadius 数值
borderRightColor 字符串
borderTopColor 字符串
opacity 数值
overflow enum('visible', 'hidden')
rotation 数值
scaleX 数值
scaleY 数值
shadowColor 字符串
shadowOffset {h: number, w: number}
shadowOpacity 数值
shadowRadius 数值
transformMatrix [数值]
translateX 数值
translateY 数值
testID 字符串型
在端到端测试中用于定位视图
例子
Edit on GitHub
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var styles = StyleSheet.create({
box: {
backgroundColor: '#527FE4',
borderColor: '#000033',
borderWidth: 1,
}
});
exports.title = '<View>';
exports.description = 'Basic building block of all UI.';
exports.displayName = 'ViewExample';
exports.examples = [
{
title: 'Background Color',
render: function() {
return ( <View style={{backgroundColor: '#527FE4', padding: 5}}>
<Text style={{fontSize: 11}}>
Blue background </Text>
</View>
);
},
}, {
title: 'Border',
render: function() {
return ( <View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
<Text style={{fontSize: 11}}>5px blue border</Text>
</View>
);
},
}, {
title: 'Padding/Margin',
render: function() {
return ( <View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
<View style={[styles.box, {padding: 5}]}>
<Text style={{fontSize: 11}}>5px padding</Text>
</View>
<View style={[styles.box, {margin: 5}]}>
<Text style={{fontSize: 11}}>5px margin</Text>
</View>
<View style={[styles.box, {margin: 5, padding: 5, alignSelf: 'flex-start'}]}>
<Text style={{fontSize: 11}}>
5px margin and padding, </Text>
<Text style={{fontSize: 11}}>
widthAutonomous=true </Text>
</View>
</View>
);
},
}, {
title: 'Border Radius',
render: function() {
return ( <View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
<Text style={{fontSize: 11}}>
Too much use of `borderRadius` (especially large radii) on
anything which is scrolling may result in dropped frames.
Use sparingly. </Text>
</View>
);
},
}, {
title: 'Circle with Border Radius',
render: function() {
return ( <View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
);
},
}, {
title: 'Overflow',
render: function() {
return ( <View style={{flexDirection: 'row'}}>
<View
style={{
width: 95, height: 10, marginRight: 10, marginBottom: 5, overflow: 'hidden', borderWidth: 0.5,
}}>
<View style={{width: 200, height: 20}}>
<Text>Overflow hidden</Text>
</View>
</View>
<View style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
<View style={{width: 200, height: 20}}>
<Text>Overflow visible</Text>
</View>
</View>
</View>
);
},
}, {
title: 'Opacity',
render: function() {
return ( <View>
<View style={{opacity: 0}}><Text>Opacity 0</Text></View>
<View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
<View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
<View style={{opacity: 0.5}}><Text>Opacity 0.5</Text></View>
<View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
<View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
<View style={{opacity: 1}}><Text>Opacity 1</Text></View>
</View>
);
},
},
];