React-Native中一些常用组件的用法详解(一)资源-CSDN文库

64 浏览量 2021-01-03 23:49:24 上传评论收藏 194KB PDF 举报

资源推荐

资源详情

资源评论

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}

},

剩余10页未读，继续阅读

内容反馈

weixin_38675970

粉丝: 5
资源: 914

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip