我尝试用React-Native开发一个应用程序。我把应用程序的工具栏1主页按钮,1下拉框组件和1菜单按钮一样,在下面的截图中的肖像模式:x1c 0d1x但在横向模式下,下拉列表组件不会填充周围的空间:
我喜欢下拉框填充周围的空间。我该怎么做?
这是我的App.js:
import { Text, SafeAreaView, StyleSheet, View, StatusBar, Dimensions } from 'react-native';
import * as React from 'react';
import ToolBar from './components/ToolBar'
export default function App() {
return (
<SafeAreaView style={styles.container}>
<ToolBar />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
paddingTop:StatusBar.currentHeight,
justifyContent: 'center',
backgroundColor: '#ffffff',
width:'100%',
height:'100%',
},
});
这是我的ToolBar.js:
import React, {useState, useEffect } from 'react';
import { View, Text, Picker, StyleSheet, StatusBar, Image, Dimensions } from 'react-native';
import { SelectList } from 'react-native-dropdown-select-list';
var listWidth = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height
export default function ToolBar() {
const [selected, setSelected] = React.useState("");
const data = [
{key:'1', value:'Mobiles'},
{key:'2', value:'Appliances'},
{key:'3', value:'Cameras'},
{key:'4', value:'Computers'},
{key:'5', value:'Vegetables'},
{key:'6', value:'Diary Products'},
{key:'7', value:'Drinks'},
];
return (
<View style={styles.container}>
<Image style={styles.logo} source={require('../assets/home.png')} />
<SelectList
style={styles.dropdownlist}
data={data}
setSelected={setSelected}
/>
<Image style={styles.logo} source={require('../assets/menu.png')} />
</View>
)
}
const styles = StyleSheet.create({
container: {
flex:1,
flexDirection:'row',
width:'100%',
margin: 2,
display: "flex",
justifyContent: "space-between",
},
logo: {
height: 48,
width: 48,
padding: 1,
},
dropdownlist: {
width:listWidth,
},
})
你能帮帮我吗?先谢了。
2条答案
按热度按时间56lgkhnf1#
你可以添加flex:1到您的下拉列表样式。就像这样:
之后的width属性是多余的。还有Flex:容器不需要1属性,因此也将其删除。
8wigbo562#
我自己解决了这个问题:Space between components in react native styling
在我的ToolBar.js中这样做: