Как я могу содержать мой кратный <Text>внутри представления?

Question

У меня есть баланс и символ денег. Я хочу показать их в том же виде, но значение, отображаемое на символе денег. Как я могу решить эту проблему?Это мой код

<View style={styles.balanceWrapper}>
    <View style={[styles.balance,{flexDirection:'row',justifyContent:'space-around',flex:1}]}>
        <Text style={{fontSize: 18, color: '#7980c9',fontFamily:'made-evolve-light',marginTop:-25,marginLeft:15 }}>Balance</Text>
        <Text numberOfLines={1} style={[styles.balanceDis,{marginRight:15,flex:0.8}]}>12345.12345678</Text>
        <Text style={[styles.balanceDis,{marginRight:15,flex:0.2,}]}>SIN</Text>
    </View>
</View>

Я не могу установить стили, каким должен быть мой стиль?Я хочу показать два из них в одной строке, и если значение баланса длинное, я использовал numberOfLines, но я не смог сработать правильно.

Вот как это выглядит:

Answer 1

Вы пытались использовать реквизит ellipsizeMode, который должен работать с реквизитом numberOfLines, чтобы определить, какая часть строки будет обрезана? В вашем случае, я полагаю, вы ищете:

<Text numberOfLines={1} ellipsizeMode='tail' style={[styles.balanceDis,{marginRight:15,flex:0.8}]}>12345.12345678</Text>

Такжеиз документов: https://facebook.github.io/react-native/docs/text

Это может также вызвать некоторые проблемы, поскольку текстовые элементы являются вложенными, поэтому я бы также это проверил.

И, наконец, есть некоторые дополнительные стили, которые вы не показываете в своем коде 'styles.balanceDis'. Возможно, будет полезно показать и эти стили, чтобы увидеть, может ли это быть вызвано чем-то или упомянутым выше комментарием.опубликуйте проект codeSandbox.

Я собирался опубликовать это как комментарий, но мне не хватает 2 представителей, чтобы сделать это, во всяком случае, я надеюсь, что это поможет.