React Native Android: содержит текст внутри родительского представления в одной строке

Question

Изображение слева ниже показывает, как текст отображается в моем проекте React-Native, но я бы хотел, чтобы текст отображался так же, как изображение справа (сделано в Swift).

Есть 3 основных различия

1. Текст слева печатается в две строки, если текст для печати достаточно длинный, на iOS конец слова просто обрезается, иногда в середина буквы (чтобы вы могли видеть только левую сторону буквы А или чего-либо еще)
2. Текст слева иногда будет печататься вне кнопки (буквы типа p)
3. Текст справа заменит середину слова на ... если текст слишком длинный
   • Я бы хотел либо этот эффект, либо уменьшить размер текста, чтобы он помещался внутри текста. кнопка

---

Это мой компонент для этих кнопок с текстом внутри

<TouchableOpacity style={styles.button} onPress={onPrs} >
    <Text style={styles.text}>{props.name}</Text>
    {premiumLabel}
</TouchableOpacity>

И это стиль, который я использовать для них

const styles = StyleSheet.create({
...
    button:{
        backgroundColor: '#37E8E8',
        justifyContent: 'center',
        width:'31%',
        borderRadius: 5
    },
...

Answer 1

Вы должны использовать ellipsizeMode prop для Text, который определяет, как текст обрезается. Для вашего требования мы должны использовать ellipsizeMode="middle", который соответствует тексту в контейнере, а недостающий текст в середине обозначен многоточием (...).

ellipsizeMode в идеале используется с еще одной реквизитом numberOfLines, но это сработает, даже если для Text указано только width, что не относится к вашей ситуации. Следовательно, numberOfLines={1} также должен быть добавлен.

Чтобы получить желаемый эффект, вы можете использовать это

<TouchableOpacity style={styles.button} onPress={onPrs} >
    <Text style={styles.text} ellipsizeMode="middle" numberOfLines={1}>{props.name}</Text>
    {premiumLabel}
</TouchableOpacity>

Подробнее о ellipsizeMode