React-Native中一些常用组件的用法详解(一)

前言

本文为大家介绍一下React-Native中一些常用的组件，由于对es6的语法并没有完全掌握，这里暂时用ES5和ES6混用的语法。

View组件

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

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

View的常用样式设置

• flex布局样式
• backgroundColor：背景颜色
• borderColor：边框颜色
• borderWidth：边框大小
• borderRadius：圆角

以手机端携程官网为示例

import React, { Component } from 'react';import { AppReGIStry, StyleSheet, Text, View} from 'react-native';var ViewTest = React.createClass({ render () { return ( <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> ) }});var styles = StyleSheet.create({ container: { margin: 10, marginTop: 25, height: 75, flexDirection: "row", backgroundColor: "#ff607c", borderRadius: 5 }, flex: { flex: 1 }, white: { color: "white", fontWeight: "900", textShadowColor: "#ccc", textShadowOffset: {width: 1, height: 1} }, center: { justifyContent: "center", alignItems: "center" }, leftRightLine: { borderLeftWidth: 1, borderRightWidth: 1, borderColor: "white" }, bottomLine: { borderBottomWidth: 1, borderColor: "white" }});AppRegistry.registerComponent('HelloReact', () => ViewTest);