React-native 文本布局

Question

我有以下 react-native 组件：

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>
    </>
  );
};

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

我想要的是：

1. 蓝色文字不会溢出右侧的红色容器（尊重marginHorizontal: 8）
2. 蓝色文本从左侧红色容器的开头开始（换行）

Answer 1

这就是解决方案。从实现中检查this

您的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>
  );
};