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

这就是解决方案。 从实施中检查这一点

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