javascript - 如何在 ScrollView 中水平包裹动态标签列表？

Question

我已经在 React Native 中创建了一个标签列表，但我似乎无法让它们跨多行换行 - 这是我到目前为止所拥有的:

我希望标签根据文本展开 - 例如，屏幕截图中的最后一个标签应为 Another tag - 并在需要时换行。

我已经使用 ScrollView 组件渲染了标签，据我所知 FlatList 不支持换行 - 这是代码:

    <ScrollView
      contentContainerStyle={{
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
      }}
      style={styles.tagContainer}>
      {selectedTags
        ? selectedTags.map(tag => (
            <Tag
              style={{backgroundColor: tag.color}}
              label={tag.label}
              isList={false}
            />
          ))
        : null}
    </ScrollView>


styles: {
      tagContainer: {
        width: SCREEN_WIDTH - 20,
        minHeight: 75,
      },
}

每个标签都使用如下所示的 Tag 组件呈现:

const Tag = ({label, style, isList, isChecked}) => {
  const renderIcon = () => {
    if (isList === true) {
      return (
        <Icon
          name="ios-checkmark"
          color={isChecked ? 'black' : 'white'}
          size={36}
          style={{alignSelf: 'center', margin: 5}}
        />
      );
    }
  };

  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'row',
      }}>
      {renderIcon()}
      <View style={isList ? styles.listContainer : styles.tagContainer}>
        <Text style={[styles.tagStyle, style]}>{label}</Text>
      </View>
    </View>
  );
};

const styles = {
  tagContainer: {margin: 2, height: 30, flex: 1},
  listContainer: {
    flex: 1,
    flexDirection: 'column',
    width: 375,
    height: 50,
    borderBottomColor: '#dadade',
    borderBottomWidth: 0.5,
    justifyContent: 'center',
  },
  tagStyle: {
    borderRadius: 4,
    padding: 5,
    marginLeft: 10,
    flexDirection: 'row',
    alignSelf: 'flex-start',
  },
};

export {Tag};

谢谢!

Answer 1

尝试以下

<View style={{ flexDirection: 'row', flexWrap: 'wrap', flex: 1, alignItems: 'flex-start' }}>
  {selectedTags
        ? selectedTags.map(tag => (
            <Tag
              style={{backgroundColor: tag.color}}
              label={tag.label}
              isList={false}
            />
          ))
        : null}
</View>