在React-native中填充组件之间的空间

eit6fx6z  于 2023-10-22  发布在  React
关注(0)|答案(2)|浏览(164)

我尝试用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,
    },
   
})

你能帮帮我吗?先谢了。

56lgkhnf

56lgkhnf1#

你可以添加flex:1到您的下拉列表样式。就像这样:

dropdownlist: {
    flex: 1
}

之后的width属性是多余的。还有Flex:容器不需要1属性,因此也将其删除。

8wigbo56

8wigbo562#

我自己解决了这个问题:Space between components in react native styling
在我的ToolBar.js中这样做:

return (
    <View  style={{flexDirection:'row', flex:3, justifyContent: "space-between"}}> 
      <View style={{ padding: 2 }}><Image source={require('../assets/home.png')} /></View>
      <View style={{flex:1, padding: 2, width:'100%'}}>
        <SelectList  
          data={data} 
          setSelected={setSelected} 
        /></View>
      <View style={{ padding: 2}}><Image style={styles.logo} source={require('../assets/menu.png')} /></View>
   </View> 
    )
      
  }

相关问题