如何在 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>