如何在React Native中对齐多行文字

时间:2018-12-17 06:38:52

标签: react-native text alignment multiline

在屏幕上,我需要将文本拆分为列视图,并需要将右侧文本与左侧文本对齐。同样,需要逐行显示整个文本。经过测试,给出了一些高度,宽度和位置:绝对,但是没有用。知道如何解决这个问题吗?

我将发布当前代码和屏幕截图供您参考。

非常感谢您的帮助

   <View style={styles.twoCol}>

     <View style={styles.leftField}>
       <Text style={styles.leftFieldTitle}>Location:</Text>
      </View>

     <View style={styles.locationRightSide}>
       <Text style={styles.rightFieldTitle}>{location}</Text>
     </View>

   </View>

const styles = StyleSheet.create({

     twoCol: {
           alignItems: 'center',
           flexDirection: 'row',
           marginTop: 25,
         },
      leftField: {
            alignItems: 'flex-end',
            width: '25%',
        },  
       leftFieldTitle: {
            fontWeight: '700',
            color: 'black'
        },

        },
        locationRightSide: {
            width: '70%',
            alignItems: 'flex-start',
            paddingLeft: 10
        },
      rightFieldTitle: {
            fontSize: RF(2.8),
            color: 'black'
        },
        )}

this is how it shows currently

1 个答案:

答案 0 :(得分:1)

问题解决了!!!感谢大家! after the issue fixed

class extends