React Native 之 Text居中显示

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

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

import ImageEqualEnlarge from './ImageEqualEnlarge.js' 

export default class ViewProject extends Component {

  render() {
    return (
      
         
            happy
        
        
            忧伤 
        
      
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent: 'center',
    alignItems:'center',
  }，
  textStyle:{
   height:100,
   width:200,
   fontSize:30,
   backgroundColor:'gray',
   textAlign:'center',   
   justifyContent: 'center', //虽然样式中设置了 justifyContent: 'center'，但无效

   margin:5

 }});AppRegistry.registerComponent('ViewProject', () => ViewProject);

Text 组件的样式键 textAlign 和 justifyContent 都设置为center，这样字符串应该垂直和水平都居中，但事实上，只会水平居中显示效果如图

正确的做法是 Text组件外边包一层View，且Text组件的样式除了fontSize键值其它样式键值都移到外层View的样式中 如下代码实现：

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

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

import ImageEqualEnlarge from './ImageEqualEnlarge.js' 

export default class ViewProject extends Component {

  render() {
    return (
      
         
         
            happy
        
        
        
        
            忧伤 
        
        
      
    );
  }


}



const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent: 'center',
    alignItems:'center',
  },
  newTextStyle:{
   fontSize:30,
  },
  textStyle:{
   height:100,
   width:200,
   fontSize:30,
   backgroundColor:'gray',
   textAlign:'center',
   justifyContent: 'center',
   margin:5
  },
  ViewForTextStyle:{
    height:100,
    width:200,
    alignItems:'center',
    justifyContent: 'center',
    backgroundColor:'gray',
    margin:5
  }

});
AppRegistry.registerComponent('ViewProject', () => ViewProject);