css - react 本地flex问题:如何拉伸(stretch)包裹的物品？

我想实现以下目标：



我正在使用名为react-native-easy-grid的模块
整个东西都包裹在Grid
与：
蓝线为Col
红线是Row
橙色线为View

到目前为止，这是我的代码：

<Grid>
      <Col>
        <Thumbnail circular source={selectedChildAvatar} />
      </Col>
      <Col size={4}>
        <Row style={{ flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-evenly' }}>
          {/* name, in review */}
          <View>
            {!_.isEmpty(selectedChild) && <Text>{selectedChild.firstName}</Text>}
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center'
              }}>
              <Text note>In review: {inReviewCount <= 0 && 0}</Text>
              {inReviewCount > 0 && (
                <View
                  style={{
                    backgroundColor: 'red',
                    paddingLeft: 4,
                    paddingRight: 4,
                    borderRadius: 50
                  }}>
                  <Text note>10</Text>
                </View>
              )}
            </View>
          </View>

          {/* earnings, penalties */}
          <View>
            {/* earnings */}
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center'
              }}>
              <ProgressiveImage
                resizeMode='cover'
                imageStyle={styles.badge}
                style={styles.badge}
                source={images.icon.earnings}
              />
              <Text style={[styles.digits, styles.earningDigits]}>12</Text>
            </View>

            {/* penalties */}
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center'
              }}>
              <ProgressiveImage
                resizeMode='cover'
                imageStyle={styles.badge}
                style={styles.badge}
                source={images.icon.penalties}
              />
              <Text style={[styles.digits, styles.penaltyDigits]}>12</Text>
            </View>
          </View>

          {/* review button */}
          <View style={{ marginVertical: 10 }}>
            <Button
              small
              iconRight
              primary
              block
              disabled={inReviewCount === 0}>
              <Text>Review</Text>
              <Icon name='arrow-forward' />
            </Button>
          </View>
        </Row>
      </Col>
    </Grid>

但这就是我得到的：


将包裹的按钮拉伸到宽度的100％是什么方法？

谢谢！

最佳答案

使用flex或将width设置为100％

<View style={{ marginVertical: 10, flex: 1 }}>
  <Button
    small
    iconRight
    primary
    block
    disabled={inReviewCount === 0}>
    <Text>Review</Text>
    <Icon name='arrow-forward' />
  </Button>
</View>

关于css - react 本地flex问题:如何拉伸(stretch)包裹的物品？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56518441/