react-native 二级循环有效显示写法

_大龄码农

于 2020-08-27 14:46:34 发布

阅读量479

点赞数 1

分类专栏： ReactNative 前端

本文链接：https://blog.youkuaiyun.com/qq_36229552/article/details/108260460

版权

前端同时被 2 个专栏收录

18 篇文章

订阅专栏

ReactNative

10 篇文章

订阅专栏

本文介绍了一种基于React的手写数据展示方法，通过数组结构存储工作项，并使用TouchableOpacity组件实现列表项的点击反馈。文章详细展示了如何在React中利用map函数遍历数组并渲染元素，同时介绍了如何设置样式以实现美观的界面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
手写数据

dataArray: [
                {
                    state: 0,
                    data: [
                        {text: 'xxxxxxxxxxx工作1', num: '1'},
                        {text: 'xxxxxxxxxxx工作2', num: '1'},
                    ],
                }
            ],

在render写入

{
                            this.state.clickType ?
                                <View>
                                    {this.state.dataArray.map((item,index)=>{  //第一层循环
                                        if(item.state == 0){
                                            return (
                                                <View>{
                                                    item.data.map((li,_index)=>{  //第二层循环
                                                    return (
                                                        <TouchableOpacity
                                                            onPress={()=>this.nextClick(li)}
                                                            style={{
                                                                flexDirection: 'row',
                                                                alignItems: 'center',
                                                                justifyContent: 'space-between',
                                                                paddingRight: px2dp(30),
                                                                backgroundColor: '#fff',
                                                            }}>
                                                            <View style={styles.secondLevel}>
                                                                <Feather
                                                                    name={'corner-down-right'}
                                                                    size={FONT_SIZE(20)}
                                                                    color='#A6A6A6'
                                                                />
                                                                <Text numberOfLines={1} style={styles.s_txt}>{li.text}</Text>
                                                            </View>
                                                            <Text style={styles.num}>{li.num}</Text>
                                                        </TouchableOpacity>
                                                    )
                                                })}</View>
                                            )
                                        }
                                    })}
                                </View> : null
                        }