Как передать массив json в Listview в React Native

Он я пытаюсь реализовать 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. Как передать массив json в Listview в React Native .

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

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>  


            }
          />

вот что я пробовал, но получаю сообщение об ошибке, так как Как передать массив json в Listview в React Native

json react-native react-native-android

17.09.2018 12:45

Как сделать HTTP-запрос в Javascript?

В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:

988

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не можете назначить свои данные напрямую источнику данных listview. Измените конструктор и переместите источник данных listview в глобальное состояние. Также вы не можете назначить 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>
        }
      />
    );
  }
}

Привет, Мелих Мучук, Большое спасибо за помощь. Моя проблема решена. Я не думал о ее разборе. Это была ошибка.

— 17.09.2018 14:15

17.09.2018 13:59