はじめに
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>
);
}
もっと文字数を増やした。3行になった。
でも、3行でおさまらないときは...で切り取られたっぽい。
コード上で改行しても意味ないようだ。なるほど。。。意図的に改行させたいときはどないしよ?
意図的に改行したいならタグを追加したらよいようだ。なるほどね。
でも、ちゃんと文字の大きさとかを意識しないと、こんな感じでレイアウト崩れしちゃう。
3行ごとの表示なのに2行とちょっと、みたいな表示の仕方になってる。画像の高さを優先されちゃうのかなぁって。
余白をいれるには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}>
岡山県は9日、105人が新型コロナウイルスに感染したと発表した。
津山市20人、玉野市12人、瀬戸内市10人、総社、備前、浅口市、
</Text>
<Text numberOfLines={2}>
美咲町各7人、井原市各6人、赤磐市4人、笠岡、新見、真庭市、早島、
鏡野町各3人、美作市、矢掛、奈義町各2人、高梁市、久米南、吉備中央町、
県外在住者各1人。※岡山県の発表には、岡山、倉敷両市の感染者は
含まれません。(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。
試しにitemContainerの方に同じようにpadding:10 いれた。結果がこちら
itemContainer: {
height: 100,
width: "100%",
borderColor: "gray",
borderWidth: 1,
flexDirection: "row",
padding: 10
},
テキストのフォントサイズを変える
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"
}
});