如何在 React Native Flexbox 中将按钮向右对齐

Question

我来自 SwiftUI 世界，作为 React Native 的初学者，我正在尝试学习 Flexbox。我当前面临的问题是我不知道如何将两个按钮“开/关”对齐/放置在黄色矩形的右侧。我希望我的应用程序看起来像这样： 现在看起来如何： 我将展示我的完整代码，以防万一您需要它：

import { Button, StyleSheet, Text, View } from "react-native"
import { Image } from "react-native"

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.houseAndHeaderView}>
        <Image
          source={require("../lab3/assets/house.png")}
          style={styles.imgHouse}
        />
        <Text style={styles.txtSmartHome}>SmartHome</Text>
      </View>
      <Text style={styles.txtRooms}>Rooms</Text>
      <View style={styles.imagesView}>
        <View style={styles.rectangleView}>
          <Image
            source={require("../lab3/assets/living-room.png")}
            style={styles.imgLivingRoom}
          />
          <Text style={styles.txtImage}>Living Room</Text>
        </View>
        <View style={styles.rectangleView}>
          <Image
            source={require("../lab3/assets/bed.png")}
            style={styles.imgBed}
          />
          <Text style={styles.txtImage}>Bedroom</Text>
        </View>

        <View style={styles.rectangleView}>
          <Image
            source={require("../lab3/assets/kitchen.png")}
            style={styles.imgKitchen}
          />
          <Text style={styles.txtImage}>Kitchen</Text>
        </View>
      </View>
      <Text style={styles.txtDevices}>Devices</Text>
      <View style={styles.threeYellowBoxesView}>
        <View style={styles.yellowBoxView}>
          <View style={styles.smallRectangle} />
          <Text style={styles.txtNextToSmallRectangle}>Living Room Lamp</Text>
          <View style={styles.onOrOffButtonsView}> // These are the buttons I wanna place to the right side
            <Button title="On" />
            <Button title="Off" />
          </View>
        </View>
        <View style={styles.yellowBoxView}>
          <View style={styles.smallRectangle} />
          <Text style={styles.txtNextToSmallRectangle}>Heater</Text>
          <View style={styles.onOrOffButtonsView}>
            <Button title="On" />
            <Button title="Off" />
          </View>
        </View>
        <View style={styles.yellowBoxView}>
          <View style={styles.smallRectangle} />
          <Text style={styles.txtNextToSmallRectangle}>TV</Text>
          <View style={styles.onOrOffButtonsView}>
            <Button title="On" />
            <Button title="Off" />
          </View>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  houseAndHeaderView: {
    justifyContent: "flex-start",
    flexDirection: "row",
    marginTop: 40,
    marginLeft: 20,
  },
  imgHouse: {
    height: 60,
    width: 60,
  },
  txtSmartHome: {
    textAlign: "center",
    alignSelf: "center",
    paddingLeft: 25,
    color: "#28a183",
    fontWeight: "800",
    fontSize: 18,
  },
  txtRooms: {
    fontWeight: "bold",
    fontSize: 24,
    paddingLeft: 20,
    marginTop: 20,
  },
  imagesView: {
    flexDirection: "row",
    justifyContent: "space-evenly",
    marginTop: 10,
  },
  imgLivingRoom: {
    height: 80,
    width: 80,
    alignSelf: "center",
    marginTop: 10,
  },
  imgBed: {
    height: 80,
    width: 80,
    alignSelf: "center",
    marginTop: 10,
  },
  imgKitchen: {
    height: 80,
    width: 80,
    alignSelf: "center",
    marginTop: 10,
  },
  txtImage: {
    textAlign: "center",
    paddingTop: 10,
    fontWeight: "600",
  },
  rectangleView: {
    backgroundColor: "#28a183",
    width: 110,
    height: 120,
  },
  txtDevices: {
    fontWeight: "bold",
    fontSize: 24,
    paddingLeft: 20,
    marginTop: 20,
  },
  threeYellowBoxesView: {
    flexDirection: "column",
    justifyContent: "center",
  },
  yellowBoxView: {
    backgroundColor: "#e6e650",
    height: 80,
    width: "80%",
    marginTop: 10,
    alignSelf: "center",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
  },
  smallRectangle: {
    height: 20,
    width: 20,
    backgroundColor: "red",
    marginLeft: 10,
  },
  txtNextToSmallRectangle: {
    fontWeight: "500",
    marginLeft: 10,
  },
  onOrOffButtonsView: {
    backgroundColor: "white",
    justifyContent: "flex-end",
  },
})

抱歉，如果它看起来很乱，也很抱歉有任何不好的名称选择。

我为解决问题所做的就是基本上为我的

onOrOffButtonsView

尝试了所有不同的 Flexbox 属性，如下所示：

 onOrOffButtonsView: {
    backgroundColor: "white",
    justifyContent: "flex-end",
  //  alignContent: 'flex-end',
   // alignItems: 'flex-end',
   // alignSelf: 'flex-end',
  
  },

这些都没有真正起到任何作用。我知道我可以使用边距或填充，但建议这样做吗？据我所知，如果我想保持布局响应能力，则只能选择仅对小边距使用边距/填充。拜托，不管你能否解决问题，请随时给我更多提示！

Answer 1

对于您的用例，我认为将左边距设置为自动可能是最适合的：

onOrOffButtonsView: {
  backgroundColor: "white",
  marginLeft: 'auto'
}

这个问题/答案详细介绍了在 React Native 中实现此效果的所有可能方法