Изменить собственный текст, например, span

Я попытался выполнить решение в отображении Simulate: inline in React Native, но он не работает.

Я хотел бы сделать то же самое, что и в HTML

Первая строка короткая, поэтому кажется, что нет проблем, но содержимое второй строки слишком велико, и ожидается, что она заполнит все пространство перед тем, как перейти к следующей строке.

Но мой результат выглядит как... output

<View style={styles.contentView}>
    <Text style={styles.username}>{s_username}</Text>
    <Text style={styles.content}>{s_content}</Text>
</View>

contentView: {
    paddingLeft: 10,
    flex: 1,
    flexDirection:'row',
    flexWrap:'wrap'
},
username: {
    fontWeight: 'bold'
},
content: {

},

Ответы

Ответ 1

Reacted native поддерживает вложенные компоненты Text, и вы должны использовать это, чтобы получить желаемый результат. Например, ваш второй текстовый компонент должен быть вложен во второй, например, так

<View style={styles.contentView}>
    <Text>
        <Text style={styles.username}
              onPress={() => {/*SOME FUNCTION*/} >
           {s_username}
        </Text>
        <Text style={styles.content}>{s_content}</Text>
    </Text>
</View>

Ответ 2

вы можете сделать как вложенный текст, так как текст внутри будет рассматриваться как span как html

<View style={styles.contentView}>
  <Text style={styles.content}><Text style={styles.username}>{s_username}</Text> {s_content}</Text>
</View>

contentView: {
  paddingLeft: 10,
  flex: 1,
},
username: {
  fontWeight: 'bold'
},
content: {

},