import ParcelData from './ParcelData.json'

var { width,height } = Dimensions.get('window');

let Headers = [];

export default class ParcelPage extends Component {

static navigationOptions = ({ navigation }) => ({
headerTitle : '联动List',});

componentDidMount() {
ParcelData.map((item,i) => {
Headers.push(item.section);
});
};

componentWillUnmount() {
Headers = [];
};

renderLRow = (item) => {
return (
<TouchableOpacity style={[ styles.lItem,{backgroundColor: item.index == this.state.cell ? 'white' : null} ]}
onPress={()=>this.cellAction(item)}>

{ item.item.section } ) };

cellAction = (item) => {
if (item.index <= ParcelData.length) {
this.setState({
cell : item.index
});
if (item.index > 0) {
var count = 0;
for (var i = 0;
i < item.index;
i++) {
count += ParcelData[ i ].data.length + 1
}
this.refs.sectionList.scrollToIndex({ animated : false,index : count })
} else {
this.refs.sectionList.scrollToIndex({ animated : false,index : 0 });
}

}

};

itemChange = (info) => {
let section = info.viewableItems[ 0 ].section.section;
if (section) {
let index = Headers.indexOf(section);
if (index < 0) {
index = 0;
}
this.setState({ cell : index });
}
};

state = {
cell : 0
};

renderRRow = (item) => {
return (
<View style={ styles.rItem }>
<Image style={ styles.icon } source={{ uri : item.item.img }}/>
<View style={ styles.rItemDetail }>
<Text style={ styles.foodName }>{ item.item.name }
<View style={ styles.saleFavorite }>
<Text style={ styles.saleFavoriteText }>{ item.item.sale }
<Text style={ [styles.saleFavoriteText,{ marginLeft:15 }]}>{ item.item.favorite }

￥{ item.item.money } ) };

sectionComp = (section) => {
return (
<View style={{height:30,backgroundColor:'#DEDEDE',justifyContent:'center',alignItems:'center'}}>

{section.section.section} ) };

separator = () => {
return (
<View style={{height:1,backgroundColor:'gray'}}/>
)
};

render() {
return (
<View style={ styles.container }>
<FlatList
ref='FlatList'
style={ styles.leftList }
data={ ParcelData }
renderItem={(item) => this.renderLRow(item)}
ItemSeparatorComponent={ () => this.separator() }
keyExtractor={ (item) => item.section }
/>
<SectionList
ref='sectionList'
style={ styles.rightList }
renderSectionHeader={ (section) => this.sectionComp(section) }
renderItem={ (item) => this.renderRRow(item) }
sections={ ParcelData }
keyExtractor={ (item) => item.name }
onViewableItemsChanged={ (info) => this.itemChange(info) }
/>

); } }

const styles = StyleSheet.create({
container : {
flexDirection : 'row'
},leftList : {
width : 1 width / 4,backgroundColor : '#E9E9EF'
},lItem : {
minHeight : 44,justifyContent : 'center',},lText : {
marginLeft : 10,marginRight : 10,fontSize : 16,rightList : {
width : 3 width / 4
},rItem : {
flexDirection : 'row'
},rItemDetail : {
flex : 1,marginTop : 10,marginLeft : 5
},icon : {
height : 60,width : 60,marginBottom : 10,marginLeft : 8,borderWidth : 1,borderColor : '#999999'
},foodName : {
fontSize : 18,saleFavorite : {
flexDirection : 'row',marginTop : 5,marginBottom : 5,saleFavoriteText : {
fontSize : 13,moneyText : {
color : 'orange'
},});

301.jpg" },{ "name" : "小馄饨","money" : "10","img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg" },{ "name" : "蟹黄汤包+牛杂粉丝汤套餐","money" : "35","img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg" },{ "name" : "鸭血粉丝汤","money" : "15","img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg" } ] },{ "section" : "介绍我们","data" : [ { "name" : "慎用差评！任何问题联系我们就可解决哦","sale" : "月售1","favorite" : "赞0","money" : "0","img":"http://p1.meituan.net/deal/__39230311__3449301.jpg" } ] },{ "section" : "折扣套餐","data" : [ { "name" : "特色蟹黄汤包+鸭血粉丝汤+果汁套餐","money" : "50",{ "name" : "蟹黄汤包+南瓜粥+果汁套餐",{ "name" : "金牌蟹黄汤包+紫米粥+柠檬果汁套餐",{ "name" : "台式卤肉饭+南瓜粥套餐",{ "section" : "纯手工汤宝","data" : [ { "name" : "金牌蟹黄汤包",{ "name" : "蟹庭丰特色蟹黄汤包",{ "name" : "蟹黄汤包",{ "name" : "干贝汤包",{ "name" : "鲍鱼汤包",{ "name" : "全家福汤包",{ "name" : "虾仁汤包",{ "section" : "汤、粥类","data" : [ { "name" : "紫米粥",{ "name" : "金丝南瓜粥",{ "name" : "小米粥",{ "name" : "白粥",{ "section" : "面食类","data" : [ { "name" : "鸡汤面",{ "name" : "红烧小排面",{ "name" : "红烧牛肉面",{ "section" : "调味小菜","data" : [ { "name" : "肉松",{ "name" : "辣椒包",{ "name" : "泡菜",{ "name" : "酱黄瓜",{ "name" : "萝卜干",{ "section" : "饮料","data" : [ { "name" : "可乐",{ "name" : "雪碧",{ "name" : "王老吉",{ "name" : "橙汁","img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg" } ] } ]

代码格式化后大概在187行的位置，修改如下

class SectionList<SectionT: SectionBase>
extends React.PureComponent<DefaultProps,Props,void> {
props: Props;
static defaultProps: DefaultProps = defaultProps;

render() {
const List = this.props.legacyImplementation ? MetroListView : VirtualizedSectionList;
return <List
ref={this._captureRef}
{...this.props} />;
}

_captureRef = (ref) => {
this._listRef = ref;
};

scrollToIndex = (params: { animated?: ?boolean,index: number,viewPosition?: number }) => {
this._listRef.scrollToIndex(params);
}
}

; }

_captureRef = (ref) => {
this._listRef = ref;
};

scrollToIndex = (params: { animated?: ?boolean,viewPosition?: number }) => {
this._listRef.scrollToIndex(params);
}

App);