2016-10-19 7 views
1

私はこのReact-nativeでは、複数のテキストの複数行を作成する方法は?

<View> 
    <Text>By clicking this I accept </Text> 
    <TouchableHighlight> 
    <Text>Terms and Conditions, </Text> 
    </TouchableHighlight> 
    <TouchableHighlight> 
    <Text>Privacy Policy</Text> 
    </TouchableHighlight> 
</View> 

のようなものを持っており、それがこの

By clicking this I accept 
Terms and Conditions 
Privacy Policy 

のように見えるか、私は行でそれを持っている場合、それはこのようになります

|          |   
| By clicking this I accept Terms and Con|ditions, Privacy Policy 
|          | 
|は、画面の境界線を示しています)

と思われる

|          | 
| By clicking this I accept Terms and | 
| Conditions, Privacy Policy   | 

つまり、単語が画面に収まらない場合は、次の行に配置されます。複数行のテキストと同じですが、複数のテキストとタッチ可能なハイライトがあります。これも可能ですか?

答えて

0

このようなものを試してみてください。

<Text> 
    <Text>By clicking this I accept </Text> 
    <Text onPress={() => console.log('terms pressed')} style={{color: 'red'}}>Terms and Conditions</Text> 
    <Text>,</Text> 
    <Text onPress={() => console.log('privacy pressed')} style={{color: 'red'}}>Privacy Policy</Text> 
</Text> 

console.logを、クリックを処理したい機能への参照に置き換えてください。

+0

これはうまくいきますが、外側のテキスト(任意の正の数が動作する)のスタイルで 'flex:1'でのみ動作します。答えを編集できますか?私は正しいとマークします。 – Zygro

+1

それは、テキストコンテナが何をしたいかによって決まります。 Flex 1は、「これを全幅にしたい」と言っているわけではありません。 Flexはレイアウトの同じレベルで他のコンポーネントと相対的です。上記の2つのコードがflex:1、flexDirection: 'row'で表示され、フレックス:1を外側のテキストに追加すると、上記の2つのロットがそれぞれ50%を占めることになりますスクリーンの幅ですが、引き続きラッピング動作が行われます。基本的にflex:1は、レイアウトによっては必ずしも必要ではありません。それを答えに入れるのは他人に誤解を招きます。これらのコメントはそれを明確にするはずです。 –

関連する問題