[react native] I want to center it with the ScrollView, and I want the width to be 100%
Problem (問題点)
When using ScrollView, the width is not 100%, so I tried various things. (ScrollViewを使うと、幅が100%にならなくなったりしたので、いろいろ試しました。)
Operating environment (動作環境)
React Native (version 0.68.2)
Typescript (version 4.3.5)
Conculusion (結論)
Please refer to the code below. (以下のコードを参考にしてください。)
export function HomeScreen() {
return <>
<ScrollView
contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
>
<View style={{ backgroundColor: 'green', width: '100%', alignItems: 'center', justifyContent: 'center'}}>
<Text style={{ fontSize: 50, marginTop: 25 }}>あいうえお</Text>
<Text style={{ fontSize: 50, marginTop: 25 }}>これはテストです</Text>
<Text style={{ fontSize: 50, marginTop: 25 }}>これはReact Nativeで動いています。</Text>
</View>
</ScrollView>
</>;
}
export default HomeScreen;
The point is to use View in ScrollView.(ポイントとしては、ScrollViewの中でViewを利用することです。)
また、ScrollView の属性として以下を利用することです。(Also, use the following as an attribute of ScrollView.)
contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
The background is green so you can see if the width is 100%.(背景を緑色にして、幅が100%なのかわかるようにしています。)
Happily ever after.(めでたし、めでたし。)