1. ホーム
  2. react-native

[解決済み] spanのようなReactネイティブテキスト

2022-02-19 03:34:22

質問

の解決策に従おうとしました。 React Nativeで表示:インラインをシミュレートする が、うまくいきません。

HTMLのように同じことをしたいのですが

1行目は短いので問題なさそうですが、2行目の内容が長すぎるため、次の行に行く前にスペースをすべて埋めることが期待されます。

しかし、私の出力は次のようなものです。

<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: {

}, 

解決方法は?

React Nativeがサポートするもの ネスト Text コンポーネント を使用する必要があります。例えば、2つ目のテキストコンポーネントを2つ目の中に入れ子にして、以下のようにします。

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