更新

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>

在React Native中将组件放置在右中间

1 个答案:

更新