質問編集履歴

1 丁寧な表現に

sabx

sabx score 172

2019/07/18 20:05  投稿

[ReactNative]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つのコンポーネントを使用しています。
以上ですが、もし質問に不備などありましたらご指摘お願いします。
  • React Native

    585 questions

    React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る