如何在 React Native 的視圖內容之間設置間距？

Question

我是 React Native 的新手，我必須在給定它們之間的 flex 的情況下查看左右容器，現在我還必須在左右容器的內容中留出空間。

下圖中顯示的圖像以及樣式代碼，

  const styles = StyleSheet.create({
  mainContainer: {
    width: "100%",
    flexDirection: "row",
    height: moderateScale(90),
    backgroundColor: "red",
    justifyContent: "space-between",
  },
  containerLeft: {
    flexDirection: "row",
    top: moderateScale(40),
    backgroundColor: "green",
    margin: moderateScale(12),
  },
  containerRightIcons: {
    flexDirection: "row",
    justifyContent: "flex-end",
    top: moderateScale(40),
    margin: moderateScale(12),
    backgroundColor: "blue",
  },
});

Answer 1

試試下面的代碼：

  containerRightIcons: {
    flexDirection: "row",
    justifyContent: "space-between",
    top: moderateScale(40),
    margin: moderateScale(12),
    backgroundColor: "blue",
    flex:1
  },

Answer 2

將各個子組件包裝在View中，並在必要時提供marginRight 。 我們可以創建一個新組件來處理這種行為。

export function Spacer({isHorizontal = true, space = 10, children}) {
    return <View style={isHorizontal ? {flexDirection: "row"} : null}>
        { 
            React.Children.map(children, (child, index) => {
                return index < children.length - 1 ? <View style={{marginRight: space}}>{child}</View> : child
            })
        }
    </View>
}

我們使用isHorizontal標志來指示子項是否排成一行。 默認值設置為true以滿足您當前的設計。 但是，我們也可以將它重用於基於列的布局。 默認間距設置為10 。 我們可以使用space道具來控制它。

然后，按如下方式使用它。

<Spacer>
    <Child1 />
    <Child2 />
    <Child3 />
</Spacer>

我們可以通過道具來控制空間。

<Spacer space={5}>
    <Child1 />
    <Child2 />
    <Child3 />
</Spacer>