如何在 React Native 中将 container/view 的剩余 space 设置为颜色？

Question

编辑：对于建议删除 reactjs 标签的人，我的项目扩展了 React，删除标签会删除所有代码突出显示，使其（纯白色）可读性降低。

我想将底部的白色设置为这个“#f4f4f4”，它与保存按钮的背景颜色相同，但我似乎做不到。我尝试创建另一个视图并添加一个 flex 来填充它，但它没有填充屏幕的其余部分。它只是添加了一个额外的行，而不是填充剩余的 space.

  render() {
    if (!this.state.isReady) {
      return (
        <View
          style={{
            alignItems: "center",
            justifyContent: "center",
            flex: 1
          }}
        >
          <Progress.Bar indeterminate color={Themes.primaryTheme} />
        </View>
      );
    }
    return (
      <Container>
        <Content>
          <ListItem itemDivider>
            <Text
              style={{
                fontWeight: "500",
                fontSize: 18,
                color: Themes.primaryTheme
              }}
            >
              Show
            </Text>
          </ListItem>
          <ListItem style={{ borderBottomWidth: 0, height: 35 }}>
            <Body>
              <Text>Men</Text>
            </Body>
            <Right>
              <Switch
                thumbColor={Themes.primaryTheme}
                value={this.state.showMen}
                onValueChange={value => this.setState({ showMen: value })}
              />
            </Right>
          </ListItem>
          <ListItem style={{ borderBottomWidth: 0, height: 35 }}>
            <Body>
              <Text>Women</Text>
            </Body>
            <Right>
              <Switch
                thumbColor={Themes.primaryTheme}
                value={this.state.showWomen}
                onValueChange={value => this.setState({ showWomen: value })}
              />
            </Right>
          </ListItem>
          <ListItem style={{ borderBottomWidth: 0, height: 35 }}>
            <Body>
              <Text>Other</Text>
            </Body>
            <Right>
              <Switch
                thumbColor={Themes.primaryTheme}
                value={this.state.showOther}
                onValueChange={value => this.setState({ showOther: value })}
              />
            </Right>
          </ListItem>
          <ListItem itemDivider>
            <Text
              style={{
                fontWeight: "500",
                fontSize: 18,
                color: Themes.primaryTheme
              }}
            >
              Age Range
            </Text>
            <Text style={{ marginTop: 2, marginLeft: 15 }}>
              {`${this.state.minAge} - ${this.state.maxAge}`}
            </Text>
          </ListItem>
          <ListItem style={{ borderBottomWidth: 0 }}>
            <Body>
              <MultiSlider
                selectedStyle={{ backgroundColor: Themes.primaryTheme }}
                containerStyle={{ marginLeft: 20 }}
                markerStyle={{
                  borderWidth: 12,
                  borderColor: Themes.primaryTheme
                }}
                min={18}
                max={100}
                values={[this.state.minAge, this.state.maxAge]}
                onValuesChange={values =>
                  this.setState({ minAge: values[0], maxAge: values[1] })}
              />
            </Body>
          </ListItem>
          <ListItem itemDivider>
            <Text
              style={{
                fontWeight: "500",
                fontSize: 18,
                color: Themes.primaryTheme
              }}
            >
              Other Settings
            </Text>
          </ListItem>
          <ListItem style={{ height: 50 }}>
            <Body>
              <Text>Allow Notifications</Text>
            </Body>
            <Right>
              <Switch
                thumbColor={Themes.primaryTheme}
                value={this.state.showOther}
                onValueChange={value => this.setState({ showOther: value })}
              />
            </Right>
          </ListItem>
          <ListItem itemDivider>
            <Button rounded>
              <Text>Save</Text>
            </Button>
          </ListItem>
          {/* <View style={{ flex: 1, backgroundColor: "#f4f4f4" }} /> */}
        </Content>
      </Container>
    );
  }

Answer 1

尝试为屏幕的其余部分添加样式：

<Container style={{ backgroundColor:"#f4f4f4" }}>

如何在 React Native 中将 container/view 的剩余 space 设置为颜色？

How to set the remaining space of a container/view to a color in react native?

reactjs

react-native

native-base