Question

我想在本机0.60.5版本中将ListView迁移到FlatList。这是我的代码，请帮助我。

export default class Recipes extends Component {
constructor(props){
    super(props)
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    this.state = {
        uid: '',
        dataSource: ds.cloneWithRows([]),
        rawRecipes: ''
    }
}

componentWillMount() {
    try {
        let user = firebase.auth().currentUser
        this.setState({
            uid: user.uid
        })
        Helpers.getAllRecipes((recipes) => {
            if(recipes){
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(recipes),
                    rawRecipes: recipes
                })
            }
        })
    } catch(error){
        console.log(error)
    }
}

closeView(){
    this.props.navigator.pop()
}

renderRow(rowData){
    const img = rowData.image
    return (
    <TouchableHighlight style={styles.containerCell}

    >
        <View>
            <Image 
                style={{width: width, height: 180}}
                source={{uri: img}}
            />
            <View style={styles.footerContainer}>
                <View
                    style={styles.imageUser}
                >
                    <Image 
                        style={styles.imageAvatar}
                        source={{uri: rowData.userPhoto}}
                    />
                </View>
                <View style={styles.footerTextContainer}>
                    <Text style={styles.text}>{rowData.food}</Text>
                    <Text style={[styles.text, styles.textTitle]}>{rowData.title}</Text>
                    <Text style={[styles.text, styles.textBy]}>By {rowData.userName}</Text>
                </View>
            </View>
        </View>
    </TouchableHighlight>
    )
}

render(){
    return (
        <View style={styles.container}>
            <Navbar icon="times" showMenu={this.closeView.bind(this)}/>
            <ListView 
                enableEmptySections={true}
                dataSource={this.state.dataSource}
                renderRow={this.renderRow.bind(this)}
                style={{flex: 1}}
            />
        </View>
    )
}
}

这是我的数据库帮助程序代码，

static getUserCategories(userId, callback) {
    let userNamePath = '/user/' + userId;
    firebase
      .database()
      .ref(userNamePath)
      .on('value', snapshot => {
        let data = snapshot.val();
        if (snapshot) {
          if (data.rcategories) {
            let obj = {
              category: data.rcategories.category,
            };
            callback(obj);
          }
        }
      });
  }

Answer 1

您需要将数据模型从DataSource对象重构为常规数组。之后，您将需要在List组件上重命名道具。

dataSource->数据

renderRow-> renderItem

文档中的示例（https://facebook.github.io/react-native/docs/flatlist）：

<FlatList
  ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
    <View style={[style.separator, highlighted && {marginLeft: 0}]} />
  )}
  data={[{title: 'Title Text', key: 'item1'}]}
  renderItem={({item, index, separators}) => (
    <TouchableHighlight
      onPress={() => this._onPress(item)}
      onShowUnderlay={separators.highlight}
      onHideUnderlay={separators.unhighlight}>
      <View style={{backgroundColor: 'white'}}>
        <Text>{item.title}</Text>
      </View>
    </TouchableHighlight>
  )}
/>

我想将本机ListView迁移到React Nativ中的FlatList

1 个答案: