Text的第二行不在行的中心呈现

我对Text的样式有问题，我有两行Text，文本的第一行在行的中心显示正确，但代码的第二行不在中心。如何解决这个问题？Text的第二行不在行的中心呈现

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}> 
    <Text 
    style={{ marginLeft: 5, fontWeight: '500', fontFamily: 'Arial', fontSize: ratio * 14, color: '#3c3c3c' }} 
    numberOfLines={2} > {title} 
    </Text> 
</View>

来源

2017-10-04 Lucky_girl

您需要在文本组件中使用{textAlign：'center'}。 –

谢谢，有帮助，请把它写成答案，我可以接受！ –

您需要使用textAlign:'center'，

<View 
     style={{ 
     flex: 1, 
     justifyContent: "center", 
     alignItems: "center", 
     flexDirection: "row" 
     }} 
    > 
     <Text 
     style={{ 
      textAlign:'center', //Added 
      marginLeft: 5, 
      fontWeight: "500", 
      fontFamily: "Arial", 
      fontSize: ratio * 14, 
      color: "#3c3c3c" 
     }} 
     numberOfLines={2} 
     > 
     {title} 
     </Text> 
    </View>

来源

2017-10-04 13:42:26

你只需要在Text组件

style={{textAlign: 'center', marginLeft: 5, fontWeight:'500',fontFamily: 'Arial', fontSize: ratio * 14, color:'#3c3c3c'}} 
         numberOfLines={2} >

检查小吃演示这里添加textAlign：https://snack.expo.io/SJyEEwM3b

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


export default class App extends Component { 
    render() { 
    return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}> 
     <Text 
      style={{ textAlign: 'center', marginLeft: 5, fontWeight: '500', fontFamily: 'Arial', fontSize: 1 * 14, color: '#3c3c3c' }} 
      numberOfLines={2} > some text some text some text some text some text some text some text some text 
        </Text> 
     </View> 
    ); 
    } 
}

来源

2017-10-04 13:39:15

Text的第二行不在行的中心呈现

回答

相关问题