react native 视图
2016-07-14 14:26
483 查看
视图
创建 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>
为了清晰和性能,视图被设计成与样式表一起使用,尽管是内联样式也同样支持。
工具
Editon 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> ); }, }, ];
相关文章推荐
- 爱之初体验 ----- React Native
- ReactNative初学笔记1.1flexbox布局
- ReactNative报错:undefined is not an object(evaluating 'RCTCameraRollManager.getPhotos')
- ReactNative警告:CameraRoll.getPhotos(tag, success, error) is deprecated...
- RN之Flexbox
- 解决react native使用fetch函数在ios9报network request failed的问题
- [android] React Native reload 重加载 失效解决方案【RN 0.29 or RN 0.32版本】
- React Native入门-实战解析(上)
- React Native开发之动画(Animations)
- React Native工程离线运行(ios)
- 初探React Native
- react-native初探
- ReactNative的Atom编辑器
- ReactNative的ListView简述
- 闪屏(Splash)
- Failed to build DependencyGraph
- React Native ListView的Item设置点击事件时null is not an object
- react-native npm install 时出现的python环境变量缺失的问题
- 关于React-native里Android原生模块和组件的写法