react native 视图

来源：互联网发布：sql建立数据库用户编辑：程序博客网时间：2024/05/01 07:12

视图

创建 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

'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>      );    },  },];

0 0