Как передать массив json в Listview In реагировать на нативный - PullRequest
Новая
       15

Как передать массив json в Listview In реагировать на нативный

0 голосов
/ 17 сентября 2018

Он, я пытаюсь реализовать Listview в React Native. Я следовал официальным документам, но безуспешно. В основном я получаю ответ из базы данных об именах актеров и их соответствующей фамилии следующим образом 

[
{"Name":"Amitabh","LastName":"Bachchan"},
{"Name":"Jaya","LastName":"Bhaduri Bachchan"},
{"Name":"Hrithik","LastName":"Roshan"},
{"Name":"Shahrukh","LastName":"Khan"},
{"Name":"Akshay","LastName":"Kumar"},

]

Итак, я хотел отобразить этот список, используя listview. This is how i wanted to display Name.

пока это мой код 

constructor(props) {
 super(props);

  const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
   this.state = {
  dataSource:ds.cloneWithRows(['row 1', 'row 2']),
};
}

 componentDidMount() {
  //this is where i get data from previous screen as i mentioned in above format then i pass to state
   this.setState({
     dataSource: this.props.source,
 })
}

<ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) => 

                <View 
                  style={styles.CanContainer}>

                  <View
                    style={styles.CanSubContainer}>

                      <View style={{flex: 1, alignItems: 'center'}}>
                        <Text style={styles.canTitles}>
                         {rowData.Name}
                        </Text>
                      </View>

                      <View style={{flex: 1, alignItems: 'center'}}>
                        <Text style={styles.canTitles}>
                          {rowData.LastName}
                        </Text>
                      </View>

                  </View>
                </View>  


            }
          />

я попробовал следующее, но я получаю сообщение об ошибке This is the error what i am getting

1 Ответ

0 голосов
/ 17 сентября 2018

Вы не можете назначить свои данные напрямую источнику данных списка просмотра. Измените конструктор и переместите источник данных списка в глобальное состояние. Также вы не можете назначить JSON источнику данных listview. Вы должны преобразовать свой ответ JSON в объект / массив javascript. Для этого вы можете использовать функцию JSON.parse (). 

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

export default class Example extends Component {
  constructor(props) {
    super(props)

    const myData = JSON.parse(props.source);

    this.state = {
      dataSource: ds.cloneWithRows(myData),
    }
  }

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) =>
          <View
            style={styles.CanContainer}>
            <View
              style={styles.CanSubContainer}>
              <View style={{ flex: 1, alignItems: 'center' }}>
                <Text style={styles.canTitles}>
                  {rowData.Name}
                </Text>
              </View>
              <View style={{ flex: 1, alignItems: 'center' }}>
                <Text style={styles.canTitles}>
                  {rowData.LastName}
                </Text>
              </View>
            </View>
          </View>
        }
      />
    );
  }
}
...