flexDirection:'column' justifyContent: 'flex-end' でメニューバーが下に来ない on React Native

実現したいこと

メニューバー
このメニューバーを下に来させたいです

発生している問題・分からないこと

Typescript

1import React, { Component } from 'react';2import { StyleSheet, Text, View, Pressable, Image, AppRegistry } from 'react-native';3 4type Props = {};5 export default class App extends Component<Props> {6 render() {7 return (8 <View style={styles.container}>9 <View style={styles.menu}>10 <View style={styles.buttons}>11 <Pressable onPress={ () => alert('home')}>12 <Image13 style={styles.button_img}14 source={require('.//icons//home.png')}15 />16 </Pressable>17 </View>18 </View>19 </View>20 );21 }22 }23const styles = StyleSheet.create({24 container: {25 flexDirection: 'column',26 alignItems: 'stretch',27 justifyContent: 'flex-end',28 },29 menu

というstylesを定義しているのですが、上の画像のようにメニューバーが来てしまいます
メニューバーの形を維持したまま下におろすにはどうしたらよいでしょうか?

該当のソースコード

Typescript

1import React, { Component } from 'react';2import { StyleSheet, Text, View, Pressable, Image, AppRegistry } from 'react-native';3//import {*} from 'react-native-elements'4 5type Props = {};6 export default class App extends Component<Props> {7 render() {8 return (9 <View style={styles.container}>10 <View style={styles.menu}>11 <View style={styles.buttons}>12 <Pressable onPress={ () => alert('home')}>13 <Image14 style={styles.button_img}15 source={require('.//icons//home.png')}16 />17 </Pressable>18 </View>19 </View>20 </View>21 );22 }23 }24 25 26const styles = StyleSheet.create({27 container: {28 flexDirection: 'column',29 alignItems: 'stretch',30 justifyContent: 'flex-end',31 },32 menu: {33 height: 50,34 backgroundColor: '#000000',35 alignItems: "stretch",36 },37 buttons: {38 flex:1,39 justifyContent: "space-around",40 alignItems:"center",41 },42 button_img: {43 width:40,44 height:40,45 }46});

試したこと・調べたこと

上記の詳細・結果

Typescript

1position: 'absolute'2bottom: 03alignItems: ''center"

これも同様でした

補足

Android Studio Iguana | 2023.2.1 Patch 1
Build #AI-232.10300.40.2321.11567975, built on March 13, 2024
Runtime version: 17.0.9+0--11185874 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Windows 11.0
GC: G1 Young Generation, G1 Old Generation
Memory: 4096M
Cores: 16
Registry:
ide.experimental.ui=true

Non-Bundled Plugins:
com.intellij.marketplace (232.10300.41)
com.karateca.jstoolbox (1.10)
io.plugin.tsnode (2022.11.14-1)

React Native 0.74.0
Node v20.5.0
npm 9.8.0

コメントを投稿

0 コメント