React Native中如何为View的所有子元素添加内边距？

由于React Native的StyleSheet不支持CSS中的子选择器（如> *），你可以通过以下几种方式实现给styles.form下的所有子元素添加内边距：

方案1：定义通用子元素样式，逐个应用 #

先在样式表中创建一个通用的子元素样式，然后手动给每个子组件合并这个样式：

const styles = StyleSheet.create({
  // 保留原有样式
  container: { /* ... */ },
  centered: { /* ... */ },
  default: { /* ... */ },
  form: { /* ... */ },
  // 新增通用子元素内边距样式
  formItem: {
    paddingVertical: 10, // 上下内边距，可按需调整
    paddingHorizontal: 8, // 左右内边距，可选
  },
});

修改表单内的子组件，将通用样式合并到现有样式中：

<View style={styles.form}>
  <TextInput
    label="Title"
    returnKeyType="next"
    theme={{ colors: { primary: "blue", underlineColor: "transparent" } }}
    style={[{ width: 300 }, styles.formItem]} // 合并通用样式
    value={title.value}
    onChangeText={(text) => setTitle({ value: text, error: "" })}
    error={!!title.error}
    errorText={title.error}
    autoCapitalize="none"
  />
  <DropDownPicker
    label="Select Type"
    open={open}
    value={value}
    items={items}
    setOpen={setOpen}
    setValue={setValue}
    setItems={setItems}
    style={styles.formItem} // 添加通用样式
  />
  <DropDownPicker
    open={open2}
    value={value2}
    items={condition}
    setOpen={setOpen2}
    setValue={setValue2}
    setItems={setCondition}
    style={styles.formItem} // 添加通用样式
  />
  <TextInput
    label="Quantity"
    returnKeyType="next"
    theme={{ colors: { primary: "blue", underlineColor: "transparent" } }}
    style={[{ width: 300 }, styles.formItem]} // 合并通用样式
    value={quantity.value}
    onChangeText={(text) => setQuantity({ value: text, error: "" })}
    error={!!quantity.error}
    errorText={quantity.error}
    autoCapitalize="none"
  />
</View>

方案2：数组遍历渲染，统一注入样式 #

如果子元素较多，这种方式可以减少重复代码：

先把表单组件整理成带唯一key的数组：

const formElements = [
  <TextInput
    key="title-input"
    label="Title"
    returnKeyType="next"
    theme={{ colors: { primary: "blue", underlineColor: "transparent" } }}
    style={{ width: 300 }}
    value={title.value}
    onChangeText={(text) => setTitle({ value: text, error: "" })}
    error={!!title.error}
    errorText={title.error}
    autoCapitalize="none"
  />,
  <DropDownPicker
    key="type-picker"
    label="Select Type"
    open={open}
    value={value}
    items={items}
    setOpen={setOpen}
    setValue={setValue}
    setItems={setItems}
  />,
  <DropDownPicker
    key="condition-picker"
    open={open2}
    value={value2}
    items={condition}
    setOpen={setOpen2}
    setValue={setValue2}
    setItems={setCondition}
  />,
  <TextInput
    key="quantity-input"
    label="Quantity"
    returnKeyType="next"
    theme={{ colors: { primary: "blue", underlineColor: "transparent" } }}
    style={{ width: 300 }}
    value={quantity.value}
    onChangeText={(text) => setQuantity({ value: text, error: "" })}
    error={!!quantity.error}
    errorText={quantity.error}
    autoCapitalize="none"
  />,
];

渲染时遍历数组，克隆元素并合并通用样式：

<View style={styles.form}>
  {formElements.map(element => {
    const originalStyle = element.props.style || {};
    return React.cloneElement(element, {
      style: [originalStyle, styles.formItem]
    });
  })}
</View>

方案3：利用父容器gap属性（React Native 0.71+） #

如果你的React Native版本≥0.71，可直接给父容器设置gap实现子元素间距，替代内边距（适合需求为子元素间隔的场景）：

const styles = StyleSheet.create({
  form: {
    gap: 12, // 子元素之间的统一间距，水平/垂直方向均生效
  },
});

内容的提问来源于stack exchange，提问作者chackerian