一：
起初做這個組件的時候豪無頭緒宽菜，整個組件做下來基本都是由師傅教導(dǎo)下完成，好在最后也完成了净神，所以打算趁著還有記憶的時候何吝，把思路和問題都寫下來，也好以后能經(jīng)尘槲ǎ回顧爱榕。

二：

1-：這個組件支持動過點擊事件把第一個ListView里面的值傳給第二個ListView做數(shù)據(jù)源。

三：Coding
1-：得到一個數(shù)據(jù)源

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":'進(jìn)店必買'
},{
    "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":'掃一掃領(lǐng)紅包'
}

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的后可以跳出和它相對應(yīng)的第二個listView

4-：然后把一個ListView的點擊事件補全

//點擊事件坡慌，每一次點擊都改變第二個ListView的數(shù)據(jù)源（把自己數(shù)據(jù)中的cars傳給第二個ListView做數(shù)據(jù)源）
onPress={()=>{
                 var rightDs = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
                this.setState({
                    rightData:rightDs.cloneWithRows(rowData.cars),
                      })}}

出錯了呆细，原來是沒有給第二個ListView一個默認(rèn)的值

5-：給第二個ListView一個默認(rèn)值，讓他可以在頁面刷新時顯示

 var NewList=main[0].cars;

運行效果

one.gif

學(xué)到了一個有用的小技巧，記錄的同時分享一下絮爷，如果對你有幫助那就更好了趴酣。