Javascript 反应本机文本布局

我有以下react本机组件：

const TaskItem = () => {
  return (
    <>
      <View
        style={{
          marginTop: 32,
          marginHorizontal: 8,
          display: 'flex',
          flexDirection: 'row',
          backgroundColor: 'red',
        }}
      >
        <Text style={{ marginRight: 8 }}>
          <Text style={{ backgroundColor: 'green' }}>Title:</Text>
        </Text>
        <Text>
          <Text
            style={{
              fontWeight: 'bold',
              color: '#000000',
              backgroundColor: 'blue',
            }}
            numberOfLines={2}
          >
            Very long text Very long text Very long text Very long text Very long text
          </Text>
        </Text>
      </View>
    </>
  );
};

const TaskItem=（）=>{
返回(
标题：
非常长的文字非常长的文字非常长的文字非常长的文字非常长的文字
);
};

它生成以下屏幕（用于调试的背景色）：

我想要的是：

蓝色文本不会溢出右侧的红色容器（请遵守

marginHorizontal:8

）

从左侧红色容器开始的蓝色文本（换行）

---

这就是解决办法。从实现中签出

您的

TaskItem

应该如下所示

const TaskItem = () => {
  return (
    <View
      style={{
        marginTop: 32,
        marginHorizontal: 8,
        flexDirection: 'row',
        borderColor: 'black',
        borderWidth: 1,
      }}>
      <Text style={{ marginRight: 8 }}>Title:</Text>
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Text
          style={{
            fontWeight: 'bold',
            color: '#000000',
          }}
          numberOfLines={2}>
          Very long text Very long text VeVery long text Very long text Very
          long text Very long text VeryVery long text Very long text Very long
          text Very long text VeryVery long text Very long text Very long text
          Very long text VeryVery long text Very long text Very long text Very
          long text Veryry long text Very long text Very long text
        </Text>
      </View>
    </View>
  );
};

const TaskItem=（）=>{
返回(
标题：
非常长的文字非常长的文字非常长的文字非常长的文字非常长的文字
很长的文字很长的文字很长的文字很长的文字很长的文字很长
非常长的文本非常长的文本非常长的文本非常长的文本非常长的文本
非常长的文字非常长的文字非常长的文字非常长的文字非常长的文字
很长的文字很长的文字很长的文字很长的文字
);
};

使用flex似乎有效。谢谢