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

export default class Helloworld extends Component {
  render() {
    return (

     <View style={styles.style_0}>
          <View style={styles.view}><Text>
 
自由擺放</Text></View>
          <View style={[styles.view, styles.center]}><Text>居中擺放</Text></View>
          <View style={[styles.view, styles.left]}><Text>居左顯示</Text></View>
          <View style={[styles.view, styles.right]}><Text>居右顯示</Text
 
></View>
          <View style={[styles.centerView]}><Text>方塊居中</Text></View>
     </View>

    );
  }
}

const styles = StyleSheet.create({
  style_0:{
    flex:1,
    borderWidth:0.5,
    borderColor:'red',
    // justifyContent:'center',
    // alignItems:'center'
  },
  view: {
    borderWidth:5,
    borderColor:'blue',
    width:100,
    height:40
  },
  center: {
    alignSelf:'center'
  },
  left: {
    alignSelf:'flex-start'
  },
  right: {
    alignSelf:'flex-end'
  },
  centerView: {
    borderWidth:5,
    borderColor:'green',
    flex:1,
    width:200,
  },
});

AppRegistry.registerComponent('Helloworld', () => Helloworld);
 

效果圖:

// justifyContent:’center’,
// alignItems:’center’
之後的效果圖: