Реакция родного флекса на вопрос: как растянуть обернутый предмет? - PullRequest
Новая
       25

Реакция родного флекса на вопрос: как растянуть обернутый предмет?

0 голосов
/ 10 июня 2019

Я хочу добиться следующего:

enter image description here

Я использую модуль под названием 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>

но вот что я получаю: enter image description here

Какой подход будет растянуть обернутую кнопку до 100% ширины?

спасибо!

1 Ответ

0 голосов
/ 15 июня 2019

используйте 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>
...