两行上的可跳转标签组件

Question

我正在尝试实现类似的东西：

用户可以向右滑动，有时候其余的标签应该在第二行继续但不超过2行。我使组件可以移动，但所有标签只在一行上，无论我有多少。这是我的代码：

    render() {
        return (
            <ScrollView
                horizontal='true'
                style={styles.containerStyle}
                contentContainerStyle={styles.list}    
            >
                    <Tag />
                    <Tag />
                    <Tag />
                    <Tag />
                    <Tag />
            </ScrollView >
        );
    }

const styles = {
    containerStyle: {
        minHeight: 40,
        marginLeft: 8,
        marginRight: 8,
        maxHeight: 100,
    },
    list: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    }
};

Answer 1

您可以将Tags推送到Array。该数组应该分组。您可以使用以下代码进行审核。

           render() {
                    return (
                         <ScrollView 
                                    horizontal='true'
                                    style={styles.containerStyle}
                                    contentContainerStyle={styles.list}>
                                    {this._renderTagGroups()}
                          </ScrollView>);
                      }
           _renderTagGroups(){

                    let tags=["marketing","reports","sales","servers","today",
                              "urgent","website"];

                    tags=this._chunk(tags, 5);

                    return tags.map((item,index)=>{
                           return (<Tag key={index}>{item}</Tag>);

                });
            }
            function chunk(arr, start, amount){
                var result = [], 
                    i, 
                    start = start || 0, 
                    amount = amount || 500, 
                    len = arr.length;

                do {
                    //console.log('appending ', start, '-', start + amount, 'of ', len, '.');
                    result.push(arr.slice(start, start+amount));
                    start += amount;

                } while (start< len);

                return result;
            };