将图标和文本放在同一行，两端

Question

我知道以前有人问过类似的问题，但我自己无法解决这个问题。我有一个图标和一个应该显示在屏幕两端的文本。图标应该在左端，而文本应该在右端。

但是，即使我添加了 marginRight 或 paddingRight，文本也会扩展屏幕并从右侧隐藏。我该如何解决这个问题？

export default function App() {
  return (
    <SafeAreaView style={styles.safeAreaViewContainer}>
      <View style={styles.container}>
        <View style={styles.topTextContainer}>
          <BackArrow containerStyles={styles.arrowContainer} arrowStyles={styles.arrow}></BackArrow>
          <Text style={styles.allFavoritePlaces}>Alle Lieblingsorts</Text>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  arrowContainer: {
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
  },
  arrow: {
    color: 'black',
    paddingTop: 0,
  },
  allFavoritePlaces: {
    alignItems: 'flex-end',
    paddingRight: moderateScale(0),
    paddingBottom: moderateScale(10),
  },
  topTextContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginVertical: moderateScale(15),
    height: moderateScale(30),
    paddingHorizontal: 20,
  },
});

这也是一个codesandbox：https://snack.expo.io/@nhammad/sponaneous-candy

Answer 1

我在开发工具中打开了它。箭头的容器分配了一些width，当屏幕变小时，它会将文本推出视口。