React本机呈现json平面列表

我是一个新的反应本土。我在增加复杂性,但一直坚持从json列表中呈现平面列表项。这在ListView中运行良好,但无法找出我在FlatList中缺少的内容。

import React, { Component } from 'react';
import { ActivityIndicator, ListView, Text, View, StyleSheet,TouchableOpacity, FlatList  } from 'react-native';

export default class Movies extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    }
  }

  componentDidMount() {
    return fetch('https://gnosisdevelopment.com/office/list.json')
      .then((response) => response.json())
      .then((responseJson) => {
        let data_source = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.setState({
          isLoading: false,
          dataSource: data_source.cloneWithRows(responseJson.office_staff),
        }, function() {
          // do something with new state
        });
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }

    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) =>
                    <Text style={styles.touchButtonText}>{item.staff_name} </Text>
          }
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
container: {
    flex:1,
    alignItems: 'center',
    alignContent:'center',
    flexDirection: 'row',
    flexWrap:'wrap',
    justifyContent:'center',
},
touchButton:{
    alignSelf:'center',
    backgroundColor:'#2980b9',
    paddingVertical: 25,
    width:295,
    margin:15,
},
touchButtonText:{
  textAlign:'center',
  color:'#ffffff',
  fontWeight:'bold'
},

})

文本字段将是可触摸的,我将为按钮添加功能,但我想首先得到正确的列表。 欢迎提出任何建议。感谢您的帮助:)

https://gnosisdevelopment.com/office/list.json

 {
  "title": "Welcome to our office",
  "description": "Your smart office assistant",
  "office_staff": [
    { "staff_name": "Dr. Bob"},
    { "staff_name": "Dr. Xavior"},
    { "staff_name": "Dr. Sanchez"},
    { "staff_name": "Dr. Robert"},
    { "staff_name": "Dr. Albert"}
  ]
}

使用新数据源加载更新:

    import React, { Component } from 'react';
    import { ActivityIndicator, ListView, Text, View, StyleSheet,TouchableOpacity, FlatList  } from 'react-native';

    export default class Office extends Component {
      constructor(props) {
        super(props);
        this.state = {
          isLoading: true,
          dataSource: [],
        } 
      }

      componentDidMount() {
          return fetch('https://gnosisdevelopment.com/office/list.json')
            .then((response) => response.json())
            .then((responseJson) => {
             // just setState here e.g.
             this.setState({ dataSource: responseJson.office_staff, isLoading:false,});
            })
            .catch((error) => {
              console.error(error);
            });
        }
      render() {
        if (this.state.isLoading) {
          return (
            <View style={{flex: 1, paddingTop: 20}}>
              <ActivityIndicator />
            </View>
          );
        }

       return (
      <View style={styles.container}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) =><Text style={styles.touchButtonText}>{item.staff_name}</Text>
          }
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}
    const styles = StyleSheet.create({
    container: {
        flex:1,
        alignItems: 'center',
        alignContent:'center',
        flexDirection: 'row',
        flexWrap:'wrap',
        justifyContent:'center',
    },
    touchButton:{
        alignSelf:'center',
        backgroundColor:'#2980b9',
      paddingVertical: 25,
        width:295,
        margin:15,
    },
    touchButtonText:{
      textAlign:'center',
      color:'#ffffff',
      fontWeight:'bold'
    },

    })

最终工作版本:

import React, { Component } from 'react';
import { ActivityIndicator, Text, View, StyleSheet,TouchableOpacity, FlatList  } from 'react-native';

export default class Office extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: [],
    }
  }

  componentDidMount() {
      return fetch('https://gnosisdevelopment.com/office/list.json')
        .then((response) => response.json())
        .then((responseJson) => {
         // just setState here e.g.
         this.setState({ dataSource: responseJson.office_staff,isLoading: false });
        })
        .catch((error) => {
          console.error(error);
        });
    }
  render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }

    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) =><Text>{item.staff_name}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
container: {
    flex:1,
    alignItems: 'center',
    alignContent:'center',
    flexDirection: 'row',
    flexWrap:'wrap',
    justifyContent:'center',
},
touchButton:{
    alignSelf:'center',
    backgroundColor:'#2980b9',
  paddingVertical: 25,
    width:295,
    margin:15,
},
touchButtonText:{
  textAlign:'center',
  color:'#ffffff',
  fontWeight:'bold'
},

})