Поместите компонент в середину справа в React Native

Question

Я все еще учусь реагировать на нативный, особенно flexbox. Итак, у меня есть TouchableOpacity, на котором есть некоторые дочерние компоненты, например:

И проблема в том, что я не могу переместить этот значок стрелки в правый средний угол TouchableOpacity. Я пытаюсь с justifyContent: 'center', alignItems: 'flex-end' Но ничего не произошло. Вот мой код:

<TouchableOpacity onPress={this.onRowPress}>
<View style={{ padding: 5 }}>
    <CardSection style={{ flex: 1 }}>
        <Icons name="monitor" size={50} style={{ paddingLeft: 10 }} />
        <View style={{ flexDirection: 'column' }}>
            <Text style={styles.channelStyle}>
                {item.nama}
            </Text>
            <Text
                style={
                    [item.status === 'Online' ? onlineTextStyle : offlineTextStyle]
                }
            >
                {item.status}
            </Text>
        </View>
        <Icons name="arrow-right" size={50} style={styles.arrowIconStyle} />
    </CardSection>
</View>
</TouchableOpacity>

И это стиль:

const styles = {
channelStyle: {
    fontSize: 25,
    paddingLeft: 30
},
onlineTextStyle: {
    paddingLeft: 30,
    color: 'green'
},
offlineTextStyle: {
    paddingLeft: 30,
    color: 'red'
},
footerTextStyle: {
    flex: 1,
    textAlign: 'center',
    color: '#fff',
    padding: 5,
    fontSize: 18
},
arrowIconStyle: {
    justifyContent: 'center',
    alignItems: 'flex-end'
}
};

Я что-то пропустил?

Answer 1

Не могли бы вы попробовать следующее и сообщить мне, как это происходит?

// 1. Add flexDirection row here.
<CardSection style={{ flex: 1, flexDirection: 'row' }}>

    ...code...

    // 2. Add alignSelf here.
    <Icons name="arrow-right" size={50} style={[styles.arrowIconStyle, {alignSelf: 'flex-end'}]} />
</CardSection>

Если это не сработает, попробуйте не выполнять предыдущий шаг 2, а вместо этого попробуйте это.

...code...
<Icons name="arrow-right" size={50} style={styles.arrowIconStyle} />

const styles = {
  ...code...
  arrowIconStyle: {
    justifyContent: 'center',
    alignSelf: 'flex-end'
  }
};

Обновление

<TouchableOpacity onPress={this.onRowPress}>
  <View style={{ padding: 5 }}>
    <CardSection style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
      <View style={{ flex: 1 }}>
        <Icons name="monitor" size={50} style={{ paddingLeft: 10 }} />
        <View style={{ flexDirection: 'column' }}>
          <Text style={styles.channelStyle}>
            {item.nama}
          </Text>
          <Text
          style={[item.status === 'Online' ? onlineTextStyle : offlineTextStyle]}>
            {item.status}
          </Text>
        </View>
      </View>

      <Icons name="arrow-right" size={50} style={styles.arrowIconStyle} />
    </CardSection>
  </View>
</TouchableOpacity>