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

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

但是，即使我添加了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,
  },
});

导出默认函数App（）{
返回(
所有的利布林格勒
);
}
const styles=StyleSheet.create({
箭头容器：{
玛金托普：0，
marginBottom:0，
marginLeft:0，
},
箭头：{
颜色：'黑色'，
paddingTop:0，
},
所有收藏夹位置：{
对齐项目：“柔性端”，
填充右侧：中等比例（0），
填充底部：中等比例（10），
},
topTextContainer：{
flexDirection:'行'，
justifyContent:'之间的空间'，
边缘：中等比例（15），
高度：中等比例（30），
水平方向：20，
},
});

这里还有一个代码沙盒：

---

我在开发工具中打开了它。箭头的容器指定了一些

宽度

，当屏幕变小时，它会将文本推出视口

---

是否将

100vw

的

max width

添加到父级帮助？您的代码沙盒也不起作用。不，至少在react原生样式表中不起作用。我更新了链接并添加了一个图像@Simplicius