React Native标签选择筛选自定义控件

记录下自己开发遇到的需求,效果图如下:
React Native标签选择筛选自定义控件_第1张图片 React Native标签选择筛选自定义控件_第2张图片
自定义标签控件(代码是图一样式的,单击会高亮显示),代码如下:

renderKeyView = (data) => {
        //console.log('数据源',data);
        return (
            data.length === 0 ? null:
                
                    {
                        data?data.map((item, index) => {
                            let render = (
                                    
                                        {item.title}
                                    
                            )
                            return (
                                {
                                            this.setState({
                                                keyWordIndex: item.index,
                                            })
                                    }}
                                >{render}
                            )
                        }):''
                    }
                
        )
    }

样式如下:

const styles = StyleSheet.create({
    itemStyle: {
        fontSize: 14,
        paddingVertical:5,
        paddingHorizontal:10,
        borderColor: '#fff',
        borderWidth: 1,
        borderRadius: 20,
        backgroundColor:'#fff',
        color:'#000',
        margin: 5,
    },
    itemSelect:{
        backgroundColor:'#ffcf14',
        color:'#fff',
    },
});

你可能感兴趣的:(React Native标签选择筛选自定义控件)