反应本机文本布局

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