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)}
<ListView
    style={{width:width*0.2, backgroundColor:'#F5F5F5'}}
    dataSource={this.state.dataSource}
    renderRow={(rowData)=>this.renderItem(rowData)}
    showsVerticalScrollIndicator={false} 
    />
    
renderItem=(rowData)=>{
        return(
            <TouchableOpacity style={styles.fistList}
            <Text style={{textAlign:'center'}}>
            {rowData.title}</Text>
            </TouchableOpacity>)};

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

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

var rightDs = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state={rightData:rightDs.cloneWithRows(NewList)}
<View style={{backgroundColor:'#FAFAFA'}}>
        <ListView
            style={{width:width*0.8, height:height*0.7,}}
            dataSource={this.state.rightData}
            renderRow={(rowData)=>this.renderItem2(rowData)}
            />
</View>
renderItem2=(rowData)=>{
        return (
            <View style={styles.secondList}>
                <Image style={{height:height*0.12,width:height*0.12}}
                    source={rowData.image}/>
                <View style={{flex:1,paddingLeft:10}}>
                    <View style={{flex:1}}>
                        <Text style={{fontSize:20,backgroundColor:'rgba(0,0,0,0)',}}>{rowData.name}</Text>
                    </View>
                    <View style={{flex:1,justifyContent:'center'}}>
                        <Text style={{backgroundColor:'rgba(0,0,0,0)',}}>{rowData.introduce}</Text>
                    </View>
                    <View style={{flex:1,justifyContent:'flex-end'}}>
                        <Text style={{backgroundColor:'rgba(0,0,0,0)',color:'#FF4040'}}>¥{rowData.money}</Text>
                    </View>
                </View>
                <TouchableOpacity style={{position: 'absolute', right: 10, bottom: 10}}>
                    <Image style={{height: 30, width: 30, borderRadius: 5}}
                           source={require('./img/add.png')}/>
                </TouchableOpacity>
            </View>
        )

    };

我想在点击第一个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

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