React Nativeでアプリの画面をつくろう（行を指定してテキスト表示）

# はじめに
Textタグで行数を指定して表示させることができるそうだ。
やってみよう

# おさらい。Expoを起動する
プロンプトを起動。
アプリ（MyApp）を保管しているディレクトリ（C:\Users\watya\myApp）へ移動して、expo起動

```
cd C:\Users\watya\myApp
expo start
```

# 行数指定はNumberofLine
Textタグで numberOfLineで指定したらOK。

```
export default function App() {
  return (
    <View style={styles.container}>
        <View style={styles.itemContainer}>
          <View style={styles.leftContainer}>
            <Image
              style={{ width: 100, height: 100}}
              source={{uri: 'https://1.bp.blogspot.com/-ZOg0qAG4ewU/Xub_uw6q0DI/AAAAAAABZio/MshyuVBpHUgaOKJtL47LmVkCf5Vge6MQQCNcBGAsYHQ/s1600/pose_pien_uruuru_woman.png'}} />
          </View>
          <View style={styles.rightContainer}>
            <Text numberOfLines={3}>
              ぴえん。ぴえんをこえてパオン。
            </Text>
          </View>
        </View>
    </View>
  );
}
```

やってみた。文字数少なすぎた。。。３行にならない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/5aeb0075-525d-3476-37b5-5b68eee90262.png)

もっと文字数を増やした。３行になった。
でも、３行でおさまらないときは...で切り取られたっぽい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/3e9ac336-0811-1b0d-aa40-aac49997bd56.png)

画面の横幅を狭めるとその分表示文字数が減った。なるほど。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/7efada02-fcc8-0630-eb8f-404cd7636f63.png)

コード上で改行しても意味ないようだ。なるほど。。。意図的に改行させたいときはどないしよ？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/97e4ad73-c7a5-4760-1885-6c8f19338927.png)

意図的に改行したいなら<Text>タグを追加したらよいようだ。なるほどね。
でも、ちゃんと文字の大きさとかを意識しないと、こんな感じでレイアウト崩れしちゃう。
３行ごとの表示なのに２行とちょっと、みたいな表示の仕方になってる。画像の高さを優先されちゃうのかなぁって。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/96ba34b1-e72a-3f6b-d2df-f7aafc0971bd.png)

# 余白をいれるにはpadding
paddinを入れたら余白できる。

```
export default function App() {
  return (
    <View style={styles.container}>
        <View style={styles.itemContainer}>
          <View style={styles.leftContainer}>
            <Image
              style={{ width: 100, height: 100}}
              source={{uri: 'https://1.bp.blogspot.com/-ZOg0qAG4ewU/Xub_uw6q0DI/AAAAAAABZio/MshyuVBpHUgaOKJtL47LmVkCf5Vge6MQQCNcBGAsYHQ/s1600/pose_pien_uruuru_woman.png'}} />
          </View>
          <View style={styles.rightContainer}>
            <Text numberOfLines={2}>
             岡山県は９日、１０５人が新型コロナウイルスに感染したと発表した。
             津山市２０人、玉野市１２人、瀬戸内市１０人、総社、備前、浅口市、
            </Text>
            <Text numberOfLines={2}>
             美咲町各７人、井原市各６人、赤磐市４人、笠岡、新見、真庭市、早島、
             鏡野町各３人、美作市、矢掛、奈義町各２人、高梁市、久米南、吉備中央町、
             県外在住者各１人。※岡山県の発表には、岡山、倉敷両市の感染者は
             含まれません。（2022年07月09日 14時07分 更新）
            </Text>
          </View>
        </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemContainer: {
    height: 100,
    width: "100%",
    borderColor: "gray",
    borderWidth: 1,
    flexDirection: "row",
  },
  leftContainer: {
    backgroundColor: "red",
    width: 100
  },
  rightContainer: {
    backgroundColor: "gray",
    flex:1,
    padding: 10　←　ココにpadding入れた。
  },
});
```

結果はコチラ。
rightContainerのところのまわりにちょっと余白できた。なるほど、こえがpadding。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/3e2cd7a5-22f1-bfd1-f4aa-1db68b50900b.png)

試しにitemContainerの方に同じようにpadding:10 いれた。結果がこちら

```
  itemContainer: {
    height: 100,
    width: "100%",
    borderColor: "gray",
    borderWidth: 1,
    flexDirection: "row",
    padding: 10
  },
```

なるほど～これがpadding...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/eb0c8409-c4bc-227b-2ac6-42b68f9211e4.png)

# テキストのフォントサイズを変える
fontSizeで変更できるよ。

```
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
        <View style={styles.itemContainer}>
          <View style={styles.leftContainer}>
            <Image
              style={{ width: 100, height: 100}}
              source={{uri: 'https://1.bp.blogspot.com/-ZOg0qAG4ewU/Xub_uw6q0DI/AAAAAAABZio/MshyuVBpHUgaOKJtL47LmVkCf5Vge6MQQCNcBGAsYHQ/s1600/pose_pien_uruuru_woman.png'}} />
          </View>
          <View style={styles.rightContainer}>
            <Text style={styles.text}>　←ここで呼ぶ
             ぴえん
            </Text>
            <Text style={styles.subText}>　←ここで呼ぶ
             ぴえんを超えてパオン
            </Text>
          </View>
        </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemContainer: {
    height: 100,
    width: "100%",
    borderColor: "gray",
    borderWidth: 1,
    flexDirection: "row",
  },
  leftContainer: {
    backgroundColor: "red",
    width: 100
  },
  rightContainer: {
    flex:1,
  },
  text: {　←ここに追加
    fontSize: 16,
  },
  subText: {　←ここに追加
   fontSize:12,
   color: "red" 
  }
});
```

結果はコチラ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/6515e3a9-3d86-d89c-9958-fcd8ee1c9aa5.png)