React-Native中一些常用組件的用法詳解(一)-創(chuàng)新互聯(lián)

前言

創(chuàng)新互聯(lián)是一家專業(yè)提供淄川企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、成都網(wǎng)站制作、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為淄川眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

本文為大家介紹一下React-Native中一些常用的組件，由于對ES6的語法并沒有完全掌握，這里暫時(shí)用ES5和ES6混用的語法。

View組件

View是一個(gè)支持Flexbox布局、樣式、一些觸摸處理、和一些無障礙功能的容器，并且它可以放到其它的視圖里，也可以有任意多個(gè)任意類型的子視圖。

View的設(shè)計(jì)初衷是和StyleSheet搭配使用，這樣可以使代碼更清晰并且獲得更高的性能。盡管內(nèi)聯(lián)樣式也同樣可以使用。

View的常用樣式設(shè)置

• flex布局樣式
• backgroundColor：背景顏色
• borderColor：邊框顏色
• borderWidth：邊框大小
• borderRadius：圓角

以手機(jī)端攜程官網(wǎng)為示例

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}>特價(jià)酒店</Text>
  </View>
 </View>
 <View style={styles.flex}>
  <View style={[styles.flex, styles.bottomLine, styles.center]}>
  <Text style={styles.white}>團(tuán)購</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);

網(wǎng)頁名稱：React-Native中一些常用組件的用法詳解(一)-創(chuàng)新互聯(lián)
標(biāo)題URL：http://www.jbt999.com/article34/ccgdpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、電子商務(wù)、小程序開發(fā)、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站維護(hù)、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)