如何在本机中将容器/视图的剩余空间设置为一种颜色？

问题描述 投票：0回答：1

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

我想将底部白色设置为此'＃f4f4f4'，该颜色应与保存按钮的背景色相同，但我似乎无法做到。我尝试创建另一个视图并添加一个flex来填充它，但是它没有填充屏幕的其余部分。它只是增加了一行，而不是填充剩余的空间。

  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>
    );
  }

enter image description here

reactjs react-native native-base
1个回答
1
投票

尝试在您的样式中为屏幕其余部分着色：

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.