Question

我尝试了很多方法，但不幸的是它仍然无法正常工作，请帮帮我！

我已经尝试过反转文本和图标，但仍然无法正常工作

这是班上

export class More extends React.Component {
  render() {
    return (
      <View style={styles.container}>
      <View style={styles.list}>

        <View style={styles.hairline}>

          <Text style={styles.text}>

          <Text>أضف إعلانك</Text>

            <Icon name="ios-add" size={20}/>

          </Text>
        </View>

        <View style={styles.hairline}>
        <Text style={styles.text}><Icon name="ios-heart" size={20}/>      إعلانات المفضلة</Text>
        </View>

        </View>
      </View>
    );
      }
    }

这是StyleSheet

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',

    justifyContent: 'center',
  },
list: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'flext-start',
  },
  text: {
    padding: 10,
    textAlign: 'right',
    alignSelf: 'stretch',

  },

  icon: {
    flexDirection: 'row',
    alignItems: 'flex-end'
  },

  hairline: {
    borderBottomColor: '#A2A2A2',
    borderBottomWidth: 1,
},
});

我希望图标显示在文本的右侧而不是左侧。

Answer 1

尝试一下：

const TextWithIcon = ({ text, iconName }) => (
  <View
    style={{
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
    }}
  >
    <View style={{ marginRight: 8 }}>
      <Text>{text}</Text>
    </View>

    <Icon name={iconName} size={20} />
  </View>
);

如何将图标放置在文本的右侧

1 个答案: