Ios 反应本机ListView自定义

在Swift中，我可以为单个

UITableView

注册任意多个不同类型的单元格，并使用委托方法在行的特定索引处指定特定单元格，如：

 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) 
-> UITableViewCell {
  if indexPath.row == 0 {
    return cellOfType0;
  }else if indexPath.row == 1 {
    return cellOfType1;
  } ...  
}

---

如何使用React Native执行此操作？

如果您的项具有唯一id，或者使用rowID参数来renderRow，您仍然可以检查索引：

renderRow(rowData, sectionID, rowID, highlightRow) {
    if(rowID === '3')  {
        return <View style={ styles.red } key={ sectionID }>
                 <Text>{ rowData.name }</Text>
                </View>
    }
}

renderRow（行数据、节ID、行ID、高亮行）{
如果（rowID=='3'）{
返回
{rowData.name}
}
}

我已经建立了一个示例，并粘贴了下面的代码

“严格使用”；
var React=require（'React-native'）；
变量{
评估学，
样式表，
文本，
看法
列表视图
}=反应；
var data=[{name:'Christina'}，{name:'Allen'}，{name:'Amanda'}，{name:'James'}，{name:'Christina'}，{name:'Allen'}，{name:'Amanda'}，{name:'James'}]
var ds=新的ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
var SampleApp=React.createClass({
getInitialState（）{
返回{dataSource:ds.cloneWithRows（data）}
},
renderRow（rowData、sectionID、rowID、highlightRow）{
console.log（'rowID'，rowID）
如果（rowID=='3'）{
返回
{rowData.name}
} 
如果（rowID=='6'）{
返回
{rowData.name}
}  
如果（行ID%2==0）{
返回
{rowData.name}
}
返回
{rowData.name}
},
render（）{
返回(
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
玛金托普：60
},
正常：{
身高：40，
背景颜色：“#ededed”
},
甚至：{
身高：40，
背景颜色：“白色”
},
红色：{
身高：40，
背景颜色：“红色”
},
绿色：{
身高：40，
背景颜色：“绿色”
}
});
AppRegistry.registerComponent（'SampleApp'，（）=>SampleApp）；

谢谢！那个演示网站也很棒！嘿，np，很高兴我能帮上忙。

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView
} = React;

var data = [ {name: 'Christina'}, { name: 'Allen' }, { name: 'Amanda' }, { name: 'James' },{name: 'Christina'}, { name: 'Allen' }, { name: 'Amanda' }, { name: 'James' } ]

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

var SampleApp = React.createClass({

  getInitialState(){
    return { dataSource: ds.cloneWithRows(data) }
  },

  renderRow(rowData, sectionID, rowID, highlightRow){
   console.log('rowID', rowID)
    if(rowID === '3')  {
        return <View style={ styles.red } key={ sectionID }>
                 <Text>{ rowData.name }</Text>
                </View>
    } 
    if(rowID === '6')  {
        return <View style={ styles.green } key={ sectionID }>
                 <Text>{ rowData.name }</Text>
                </View>
    }  
    if(rowID % 2 == 0) {
        return <View style={ styles.even } key={ sectionID }>
                 <Text>{ rowData.name }</Text>
                </View>
    }
    return <View style={ styles.normal } key={ sectionID }>
             <Text>{ rowData.name }</Text>
           </View>
  },

  render() {
    return (
      <View style={styles.container}>
        <ListView 
        renderRow={ this.renderRow }
        dataSource={ this.state.dataSource }
        />        
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
   marginTop:60
  },
  normal: {
    height:40,
    backgroundColor: '#ededed'
  },
  even: {
    height:40,
    backgroundColor: 'white'
  },
  red: {
    height:40,
    backgroundColor: 'red'
  },
  green: {
    height:40,
    backgroundColor: 'green'
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);