反应原生 flex 问题：如何拉伸包裹的项目？

Question

我想实现以下目标：

我正在使用一个名为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% 宽度的方法是什么？

谢谢！

Answer 1

使用 flex 或将宽度设置为 100%

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