002-联动菜单 --react-native

一：
起初做这个组件的时候豪无头绪，整个组件做下来基本都是由师傅教导下完成，好在最后也完成了，所以打算趁着还有记忆的时候，把思路和问题都写下来，也好以后能经常回顾。

二：

1-：这个组件支持动过点击事件把第一个ListView里面的值传给第二个ListView做数据源。

三：Coding
1-：得到一个数据源

const main=[{
    "cars":[{
        "image":require('./img/hanbao.png'),
        "name":'香辣汉堡',
        "introduce":'很美味',
        "money":12,
    }],
    "title":'热销'
},{
    "cars":[{
        "image":require('./img/hanbao.png'),
        "name":'2',
        "introduce":'很美味',
        "money":20,
    },{
        "image":require('./img/hangbao2.png'),
        "name":'2',
        "introduce":'很美味',
        "money":18,
    }],"title":'进店必买'
},{
    "cars":[{
        "image":require('./img/hanbao.png'),
        "name":'3',
        "introduce":'很美味',
        "money":20,
    },{
        "image":require('./img/xingkong.png'),
        "name":'3',
        "introduce":'很美味',
        "money":20,
    },{
        "image":require('./img/Meishi.png'),
        "name":'3',
        "introduce":'很美味',
        "money":20,
    }],"title":'扫一扫领红包'
}

2-：先写第一个ListView组件

var leftDs = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state={dataSource:leftDs.cloneWithRows(main)}
this.renderItem(rowData)}
    showsVerticalScrollIndicator={false} 
    />
    
renderItem=(rowData)=>{
        return(
            
            {rowData.title}
            )};

作为第一个ListView我们还是老方法去布置他

3-：开始写第二个ListView组件

var rightDs = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state={rightData:rightDs.cloneWithRows(NewList)}

        this.renderItem2(rowData)}
            />

renderItem2=(rowData)=>{
        return (
            
                
                
                    
                        {rowData.name}
                    
                    
                        {rowData.introduce}
                    
                    
                        ¥{rowData.money}
                    
                
                
                    
                
            
        )

    };

我想在点击第一个ListView的后可以跳出和它相对应的第二个listView

4-：然后把一个ListView的点击事件补全

//点击事件，每一次点击都改变第二个ListView的数据源（把自己数据中的cars传给第二个ListView做数据源）
onPress={()=>{
                 var rightDs = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
                this.setState({
                    rightData:rightDs.cloneWithRows(rowData.cars),
                      })}}

出错了，原来是没有给第二个ListView一个默认的值

5-：给第二个ListView一个默认值，让他可以在页面刷新时显示

 var NewList=main[0].cars;

运行效果

one.gif

学到了一个有用的小技巧，记录的同时分享一下，如果对你有帮助那就更好了。