React Native文本过长致图片溢出容器问题求助

你的问题出在布局没有给文本和图片设置合理的空间约束，导致文本变长时挤占图片的空间。按以下步骤修改样式即可解决：

• 给element1添加flex: 1和flexDirection: 'column'，让它占据容器的剩余空间，同时保持图片和文本垂直排列
• 给text添加flexWrap: 'wrap'，让过长的文本自动换行
• 给mainContainer添加alignItems: 'center'，确保内部元素垂直居中，避免溢出

修改后的完整样式代码：

const styles = StyleSheet.create({
  mainContainer: {
    width: "42%",
    height: 100,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "green",
    borderRadius: 20,
  },
  element1: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "space-between",
    padding: "7%",
    height: "100%",
  },

  image1: {
    width: 35,
    height: 35,
    borderRadius: 10,
  },

  element2: {
    alignItems: "center",
    justifyContent: "center",
    marginRight: 10,
  },

  image2: {
    width: 50,
    height: 50,
  },

  text: {
    color: "white",
    flexWrap: "wrap",
  },
});

这样修改后，文本过长时会自动换行，element1会固定占据左侧空间，不会挤压右侧的element2，图片也不会溢出父容器了。

内容的提问来源于stack exchange，提问作者Anxheloo