[ReactNative]Textを折り返して表示する

聞きたいこと

複数のTextコンポーネントを使用して、フッターを作成しているのですが、Textがウィンドウの端まで到達したら折り返すようにしたいと思っているのですが、なかなかできないため、ご意見をいただければと思っています。

試してみたこと

下のようにflexを使用して実装してみましたが、下のリンクのように両サイドがはみ出てしまっています。

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class MainScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={{ flexDirection: 'row', fontSize: 20 }}>テキストを途中で折り返したい</Text>
        <Text style={{ flexDirection: 'row', fontSize: 20 }}>テキストを途中で折り返したい</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  }
});

https://gyazo.com/051cb585b3fcff19f14756a23d122530

理想としては、下のような配置になってほしいです。

https://gyazo.com/5a220b0a36f8c963deca0438061cbecb

使用するTextコンポーネントを1つにすれば容易なのですが、1つめと2つめで異なるリンクに遷移させたいので、2つのコンポーネントを使用しています。

以上ですが、もし質問に不備などありましたらご指摘お願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

以下のように一つ目の <Text> の中に二つの目の <Text> を入れると、ご要望の配置のされ方になると思います。

JSX
1import React, { Component } from 'react';
2import { Text, View, StyleSheet } from 'react-native';
3
4export default class MainScreen extends Component {
5  render() {
6    return (
7      <View style={styles.container}>
8        <Text style={{ fontSize: 20 }}>テキストを途中で折り返したい
9          <Text style={{ fontSize: 20 }}>テキストを途中で折り返したい</Text>
10        </Text>
11      </View>
12    )
13  }
14}
15
16const styles = StyleSheet.create({
17  container: {
18    flex: 1,
19    flexDirection: 'row',
20    justifyContent: 'center',
21    alignItems: 'center'
22  }
23});