Javascript 我怎么能不让背景色扩展整个容器？

正如您在下图中看到的，有一个标题组件，它有一个返回箭头和一个名称。我已经分别将

flex:1

应用于arrow容器和

flex-start

和

flex-end

应用于arrow和name容器

这就是我想要的。箭头位于左侧，而名称位于右侧，但当我尝试为箭头容器提供背景时，它会延伸整个宽度（我认为，因为我有一个属性

flex:1

）

是否仍要保留此设置（箭头在左侧，名称在右侧），同时仅限制箭头周围的背景，而不是整个宽度

图像：

import React from "react";
import {
  StyleSheet,
  SafeAreaView,
  View,
  Dimensions,
  ImageBackground,
  TouchableOpacity,
  Text,
} from "react-native";
import Status from "./Status";
import { AntDesign } from "@expo/vector-icons";

const ImageContainer = ({ locationName, imgUrl, status, navigation }) => {
  return (
    <ImageBackground source={{ uri: imgUrl }} style={styles.image}>
      <SafeAreaView style={styles.headerContainer}>
        <View style={styles.arrowContainer}>
          <TouchableOpacity onPress={() => navigation.navigate("HomeScreen")}>
            <AntDesign name="arrowleft" size={35} color="white" />
          </TouchableOpacity>
        </View>

        <View style={styles.nameContainer}>
          <Text style={styles.text}>{locationName}</Text>
        </View>
      </SafeAreaView>

      <Status status={status} />
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  image: {
    height: Dimensions.get("window").height / 3,
    width: "100%",
  },

  headerContainer: {
    flexDirection: "row",
    alignItems: "center",
  },

  arrowContainer: {
    flex: 1,
    marginLeft: 10,
    padding: 2,
    justifyContent: "flex-start",
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    borderRadius: 20,
  },

  nameContainer: {
    marginRight: 10,
    paddingTop: 5,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 5,
    justifyContent: "flex-end",
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    borderRadius: 20,
  },

  text: {
    color: "white",
    fontSize: 25,
  },
});

export default ImageContainer;

代码：

import React from "react";
import {
  StyleSheet,
  SafeAreaView,
  View,
  Dimensions,
  ImageBackground,
  TouchableOpacity,
  Text,
} from "react-native";
import Status from "./Status";
import { AntDesign } from "@expo/vector-icons";

const ImageContainer = ({ locationName, imgUrl, status, navigation }) => {
  return (
    <ImageBackground source={{ uri: imgUrl }} style={styles.image}>
      <SafeAreaView style={styles.headerContainer}>
        <View style={styles.arrowContainer}>
          <TouchableOpacity onPress={() => navigation.navigate("HomeScreen")}>
            <AntDesign name="arrowleft" size={35} color="white" />
          </TouchableOpacity>
        </View>

        <View style={styles.nameContainer}>
          <Text style={styles.text}>{locationName}</Text>
        </View>
      </SafeAreaView>

      <Status status={status} />
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  image: {
    height: Dimensions.get("window").height / 3,
    width: "100%",
  },

  headerContainer: {
    flexDirection: "row",
    alignItems: "center",
  },

  arrowContainer: {
    flex: 1,
    marginLeft: 10,
    padding: 2,
    justifyContent: "flex-start",
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    borderRadius: 20,
  },

  nameContainer: {
    marginRight: 10,
    paddingTop: 5,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 5,
    justifyContent: "flex-end",
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    borderRadius: 20,
  },

  text: {
    color: "white",
    fontSize: 25,
  },
});

export default ImageContainer;

从“React”导入React；
进口{
样式表，
安全区域视图，
看法
尺寸，
图像背景，
可触摸不透明度，
文本，
}从“反应本族语”；
从“/Status”导入状态；
从“@expo/vector icons”导入{AntDesign}”；
const ImageContainer=（{locationName，imgUrl，status，navigation}）=>{
返回(
导航。导航（“主屏幕”）}>
{locationName}
);
};
const styles=StyleSheet.create({
图片：{
高度：尺寸。获取（“窗口”）。高度/3，
宽度：“100%”，
},
负责人：{
flexDirection:“行”，
对齐项目：“中心”，
},
箭头容器：{
弹性：1，
边缘左：10，
填充：2，
justifyContent:“灵活启动”，
背景色：“rgba（0,0,0,0.8）”，
边界半径：20，
},
名称容器：{
marginRight:10，
paddingTop:5，
paddingLeft:10，
paddingRight:10，
填充底部：5，
辩护内容：“柔性端”，
背景色：“rgba（0,0,0,0.8）”，
边界半径：20，
},
正文：{
颜色：“白色”，
尺寸：25，
},
});
导出默认图像容器；

我建议将以下属性赋予包装容器

flex:1+
证明内容的合理性：“间隔空间”+
flexDirection:“行”

所以我相信这会给你想要的外观：


从“React”导入React；
进口{
样式表，
安全区域视图，
看法
尺寸，
图像背景，
可触摸不透明度，
文本，
}从“反应本族语”；
从“/Status”导入状态；
从“@expo/vector icons”导入{AntDesign}”；
const ImageContainer=（{locationName，imgUrl，status，navigation}）=>{
返回(
导航。导航（“主屏幕”）}>
{locationName}
);
};
const styles=StyleSheet.create({
图片：{
高度：尺寸。获取（“窗口”）。高度/3，
宽度：“100%”，
},
负责人：{
弹性：1，
辩护内容：“间隔空间”，
flexDirection:“行”，
对齐项目：“中心”，
},
箭头容器：{
边缘左：10，
填充：2，
背景色：“rgba（0,0,0,0.8）”，
边界半径：20，
},
名称容器：{
marginRight:10，
paddingTop:5，
paddingLeft:10，
paddingRight:10，
填充底部：5，
背景色：“rgba（0,0,0,0.8）”，
边界半径：20，
},
正文：{
颜色：“白色”，
尺寸：25，
},
});
导出默认图像容器我建议将以下属性赋予包装容器
flex:1+
证明内容的合理性：“间隔空间”+
flexDirection:“行”

所以我相信这会给你想要的外观：


从“React”导入React；
进口{
样式表，
安全区域视图，
看法
尺寸，
图像背景，
可触摸不透明度，
文本，
}从“反应本族语”；
从“/Status”导入状态；
从“@expo/vector icons”导入{AntDesign}”；
const ImageContainer=（{locationName，imgUrl，status，navigation}）=>{
返回(
导航。导航（“主屏幕”）}>
{locationName}
);
};
const styles=StyleSheet.create({
图片：{
高度：尺寸。获取（“窗口”）。高度/3，
宽度：“100%”，
},
负责人：{
弹性：1，
辩护内容：“间隔空间”，
flexDirection:“行”，
对齐项目：“中心”，
},
箭头容器：{
边缘左：10，
填充：2，
背景色：“rgba（0,0,0,0.8）”，
边界半径：20，
},
名称容器：{
marginRight:10，
paddingTop:5，
paddingLeft:10，
paddingRight:10，
填充底部：5，
背景色：“rgba（0,0,0,0.8）”，
边界半径：20，
},
正文：{
颜色：“白色”，
尺寸：25，
},
});
导出默认图像容器TL；DR：请参阅我为这个示例创建的

您可以通过更改为
justify content:space-between
来实现相同的效果，并且不需要将箭头容器声明为flex。您需要一个容器div，如下所示：

<div class="container">
  <div class="lefty">
     left input
  </div>
  <div class="righty">
    right input
  </div>
</div>


左输入
正确输入

您需要给容器一个
display:flex；证明内容：之间的空间
TL；DR：请参阅我为这个示例创建的

您可以通过更改为
justify content:space-between
来实现相同的效果，并且不需要将箭头容器声明为flex。您需要一个容器div，如下所示：

<div class="container">
  <div class="lefty">
     left input
  </div>
  <div class="righty">
    right input
  </div>
</div>


左输入
正确输入

您需要给容器一个
display:flex；证明内容：之间的空间
添加
显示：flex；论证内容：空间之间；将项目：居中对齐到
标题容器
，并从
箭头容器
中删除
flex:1
；论证内容：空间之间；将项目：居中对齐到
标题容器
并从