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 (
 
 
  酒店
 
 
  
  海外酒店
  
  
  特价酒店
  
 
 
  
  团购
  
  
  民宿•客栈
  
 
 
 )
 }
});
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);