1. 程式人生 > >[Wondgirl]從零開始學React Native之View(四)

[Wondgirl]從零開始學React Native之View(四)

這裡寫圖片描述

index.ios.js如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {    
  AppRegistry,
  StyleSheet,
  Text,
  View,
  PixelRatio
} from 'react-native';

export default class demo extends Component {
  render() {
    return
( <View style={styles.container}> <View style={[styles.item,styles.center]}> <Text style={styles.font}>機票</Text> </View> <View style={[styles.item,styles.lineLeftRight]}> <View style={[styles.center,{flex:1
},styles.lineCenter]}> <Text style={styles.font}>火車票</Text> </View> <View style={[styles.center,{flex:1}]}> <Text style={styles.font}>接送機</Text> </View> </View> <View style={[styles.item,styles.lineLeftRight]}> <View style={[styles.center,{flex:1
},styles.lineCenter]}> <Text style={styles.font}>汽車票</Text> </View> <View style={[styles.center,{flex:1}]}> <Text style={styles.font}>用車</Text> </View> </View> </View> ); } } //樣式 const styles = StyleSheet.create({ item:{ flex:1, height:80, borderColor:'blue', borderWidth:1, backgroundColor:'#ff0067' }, container: { borderWidth:1, borderColor:'red', flexDirection:'row', marginTop:40, marginLeft:20, marginRight:20 }, font:{ color:'#fff', fontSize:16, fontWeight:'bold' }, center:{ justifyContent:'center', alignItems:'center' }, lineCenter:{ borderBottomWidth:1/PixelRatio.get(), borderColor:'#fff' }, lineLeftRight:{ borderLeftWidth:1/PixelRatio.get(), borderRightWidth:1/PixelRatio.get(), borderColor:'#fff' } }); AppRegistry.registerComponent('demo', () => demo);