react-native - 将数据从本地 JSON 加载到 ListView 会引发 undefined is not object（评估 allrowIDs.length）

Question

我很新react-native，刚刚开始学习它。我正在尝试从位于同一级别的本地 JSON 文件加载数据App.js。这是我的 JSON 文件的内容：

[{"id":"1", "flower_name":"gumamela", "flower_image_url": "http://1.bp.blogspot.com/-1aSxJn9tssM/VTYXClgOUtI/AAAAAAAAAZ4/q-4vy4XHhCE/s1600/gumamela.jpg"}]

我正在尝试在第二个屏幕上的 ListView（已弃用）中显示图像。这是我的完整代码：

    import React, { Component } from 'react';

import {AppRegistry, StyleSheet, ActivityIndicator, Text, View, Alert,Image, Platform, Button} from 'react-native';

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from "react-navigation";
import customData from './flowers.json';
import ListView from 'deprecated-react-native-listview';

class MainActivity extends Component {  

static navigationOptions =
 {
    title: 'MainActivity',
 };

 FunctionToOpenSecondActivity = () =>
 {
    this.props.navigation.navigate('Second');

 }

 render()
 {
    return(
       <View style = { styles.MainContainer }>



          <Button onPress = { this.FunctionToOpenSecondActivity } title = 'Open List of Images'/>

       </View>
    );
 }
}

class SecondActivity extends Component
{
  constructor(props) {
    super(props);
    this.state = {
      dataSource: customData,
      isLoading: true
    }
  }
 static navigationOptions =
 {
    title: 'SecondActivity',
 };
 GetItem (flower_name) {

  Alert.alert(flower_name);

  }
  ListViewItemSeparator = () => {
    return (
      <View
        style={{
          height: .5,
          width: "100%",
          backgroundColor: "#000",
        }}
      />
    );
  }
 render()
 {
  return (

    <View style={styles.MainContainer2}>

      <ListView

        dataSource={this.state.dataSource}

        renderSeparator= {this.ListViewItemSeparator}

        renderRow={(rowData) =>

       <View style={{flex:1, flexDirection: 'row'}}>

         <Image source = {{ uri: rowData.flower_image_url }} style={styles.imageViewContainer} />

         <Text onPress={this.GetItem.bind(this, rowData.flower_name)} style={styles.textViewContainer} >{rowData.flower_name}</Text>

       </View>
        }
      />

    </View>
  );
 }
}

const AppNavigator = createStackNavigator(
{
 First: { screen: MainActivity },

 Second: { screen: SecondActivity }
});
export default createAppContainer(AppNavigator);
const styles = StyleSheet.create(
{
 MainContainer:
 {
    justifyContent: 'center',
    flex:1,
    margin: 10

 },

 TextStyle:
 {
    fontSize: 23,
    textAlign: 'center',
    color: '#000',
 },
 MainContainer2 :{

  // Setting up View inside content in Vertically center.
  justifyContent: 'center',
  flex:1,
  margin: 5,
  paddingTop: (Platform.OS === 'ios') ? 20 : 0,

  },

  imageViewContainer: {
  width: '50%',
  height: 100 ,
  margin: 10,
  borderRadius : 10

  },

  textViewContainer: {

    textAlignVertical:'center',
    width:'50%', 
    padding:20

  }
});
AppRegistry.registerComponent('MainActivity', () => MainActivity);

但是当我尝试运行该应用程序并转到第二个屏幕时，我收到一个错误：

`TypeError: undefined is not an object (evaluating 'allRowIDs.length')

This error is located at:
    in ListView (at App.js:97)
    in RCTView (at App.js:95)
    in SecondActivity (at SceneView.js:9)
    in SceneView (at StackView.tsx:269)
    in RCTView (at CardContainer.tsx:171)
    in RCTView (at CardContainer.tsx:170)
    in RCTView (at Card.tsx:488)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Card.tsx:475)
    in PanGestureHandler (at Card.tsx:468)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Card.tsx:464)
    in RCTView (at Card.tsx:457)
    in Card (at CardContainer.tsx:138)
    in CardContainer (at CardStack.tsx:544)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at CardStack.tsx:121)
    in MaybeScreen (at CardStack.tsx:537)
    in RCTView (at CardStack.tsx:96)
    in MaybeScreenContainer (at CardStack.tsx:444)
    in CardStack (at StackView.tsx:377)
    in KeyboardManager (at StackView.tsx:375)
    in RNCSafeAreaView (at src/index.tsx:26)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:34)
    in SafeAreaProviderCompat (at StackView.tsx:372)
    in StackView (at StackView.tsx:41)
    in StackView (at createStackNavigator.tsx:33)
    in Unknown (at createNavigator.js:80)
    in Navigator (at createAppContainer.js:430)
    in NavigationContainer
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

createReactClass$argument_0.render
    index.js:416:52
renderRoot
    [native code]:0
runRootCallback
    [native code]:0
unstable_runWithPriority
    scheduler.development.js:643:23
callFunctionReturnFlushedQueue
    [native code]:0

标签： react-native