Как выровнять многострочный текст в реагировать на нативный - PullRequest
Новая
       21

Как выровнять многострочный текст в реагировать на нативный

0 голосов
/ 17 декабря 2018

На моем экране мне нужно разделить текст на столбцы и выровнять текст на правой стороне текста на левой стороне.также нужно показывать весь текст построчно.Протестировано с указанием высоты, ширины, положения: абсолютное, но не сработало.Есть идеи, как это решить?

Я выложу свой текущий код и скриншот для вашей ссылки.

Большое спасибо за вашу помощь 

   <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 голосов
/ 17 декабря 2018

Проблема решена !!!Спасибо всем!after the issue fixed

<View style={{
                                padding: 10,
                                flexDirection: "row",
                                marginLeft: 10,
                                marginRight: 5,
                                marginTop: 5,
                                marginBottom: 3,
                                justifyContent: "flex-start",
                                width: '95%',
                            }} >
                                <View style={{
                                    position: 'absolute',
                                    marginTop: 10
                                }}>
                                    <Text style={styles.leftFieldTitle}>Location:</Text>
                                </View>
                                <View style={{ marginLeft: '26%' }}>
                                    <Text style={styles.rightFieldTitle}>{location}</Text>
                                </View>
                            </View>
...