반응 네이티브의 ListView에서 데이터를 전달하는 방법은 무엇입니까?

Question

LiestView에서 로컬 상태를 렌더링하려고합니다. ListView에 익숙하지 않습니다. 작동하지 않았습니다.

export default class Top extends Component { 
    state=[{title: 'a'}, {title: 'b'}, {title: 'c'}] 

    _renderItem = ({item}) => (
    <View> 
     <Text>{item.key}</Text> // here 
     <Category /> 
    </View> 
); 

    render() { 
    return (
     <FlatList 
     data={this.state.data} 
     renderItem={this._renderItem(item)} 
     /> 
    ); 
    } 
} 

아래 코드는 내 코드입니다. 그것은 작동합니다. 이 코드를 어떻게 변경합니까? 제목이 필요합니다.

export default class Top extends Component { 
    state={ 
    data:[{}, {}, {}] 
    }; 

    _renderItem =() => (
    <View> 
     <Category /> 
    </View> 
); 

    render() { 
    return (
     <FlatList 
     data={this.state.data} 
     renderItem={this._renderItem} 
     /> 
    ); 
    } 
} 

감사합니다.

Answer 1

상태는 객체 여야합니다 그리고 당신은 키 소품이없는 경우에, 당신은 keyExtractor 정의해야합니다 : 구성 요소에

import React, { Component } from "react"; 
import { Text, View, FlatList } from "react-native"; 

export default class Top extends Component { 
    state = { 
    data: [{ id: 1, title: "a" }, { id: 2, title: "b" }, { id: 3, title: "c" }] 
    }; 

    _renderItem = ({ item }) => (
    <View> 
     <Text>{item.title}</Text> 
    </View> 
); 

    // You could use the title instead of the id, but not very scalable 
    _keyExtractor = (item, index) => item.id; 

    render() { 
    return (
     <FlatList 
     data={this.state.data} 
     renderItem={this._renderItem} 
     keyExtractor={this._keyExtractor} 
     /> 
    ); 
    } 
} 

Answer 2

먼저 가져 오기 ListView에

import {View, Text, ListView} from 'react-native'; 

을 것이다 마운트 목록보기 렌더링이

componentWillMount(){ 

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.dataSource = ds.cloneWithRows(this.props.yourProps); 
} 

같은 데이터 소스를 만들

render() { 
    return (
     <View> 
      <ListView 
       enableEmptySections 
       dataSource = {this.dataSource} 
       renderRow={this.renderRow} 
      /> 
     </View>  
    ); 
} 

마지막으로 ListView에 어떤 데이터와 목록보기에서 데이터를 표시할지 알고 있어야합니다. 이를 위해 목록의 행을 렌더링하는 함수를 작성하십시오.

renderRow(yourProps) { 
     return (
      <Text>{yourProps.yourData}</Text> 
     ); 
} 

원하는대로 행의 스타일을 지정할 수 있습니다. 항목 : 그러나 내 코드 리턴 변수를 찾을 수 없습니다 https://github.com/ishraqe/manage-user/blob/master/src/components/EmployeeList.js