Question

我正在尝试使用src文件夹中提供的本地JSON文件呈现一些数据，以下是我正在使用的源代码和附加的屏幕截图。我已经尝试过执行console.log，并且在Chrome控制台区域显示该项为空，请告诉我以下代码可能出错的地方，非常感谢。

    // import dependencies here
    import React, { Component } from 'react';
    import { View, StyleSheet, Text, Image, Dimensions, ImageBackground, TouchableOpacity, FlatList } from 'react-native';
    import { Icon } from 'react-native-elements';

    // import screens here

    // import components here

    import servicesData from '../components/servicesData.json';

    const {height, width} = Dimensions.get('window');

    export default class Services extends Component {
      render() {
        return (
          <View style={styles.container}>
            <FlatList
              data={servicesData}
              renderItem={(item) =>
                <TouchableOpacity style={styles.button}>
                  <ImageBackground style={styles.backgroundImage} source={{ uri: item.image }} >
                    <View style={styles.overlay}>
                      <Text style={styles.title}>{item.title}</Text>
                      <Text style={styles.excerpt}>{item.excerpt}</Text>
                      <Icon name="arrow-right" type="font-awesome" size={30} color='#ffffff' />
                    </View>
                  </ImageBackground>
                </TouchableOpacity>
              }
            />
          </View>
        );
      }
    }

    const styles = StyleSheet.create ({
      container: {
        flex: 1,
      },
      button: {
        // flex: 0.5,
      },
      overlay: {
        backgroundColor: 'rgba(0,0,0, 0.6)',
        height: '100%'
      },
      backgroundImage: {
        width: width,
        justifyContent: 'center',
      },
      title: {
        textAlign: 'center',
        fontSize: 25,
        paddingTop: 30,
        color: '#ffffff',
        fontFamily: 'Roboto-Bold',
      },
      excerpt: {
        padding: 20,
        paddingRight: 20,
        fontSize: 18,
        justifyContent: 'center',
        color: '#ffffff',
        fontFamily: 'Roboto-Regular',
      },
    })

Answer 1

感谢大家的意见，但我找到了问题。提供的代码中缺少一组花括号，用于destructring。以下是我的最后一段工作代码，也可能对其他人有用;

    export default class Services extends Component {
          render() {
            return (
              <View style={styles.container}>
                <FlatList
                  data={servicesData}
                  renderItem={({ item }) =>
                    <TouchableOpacity style={styles.button}>
                      <ImageBackground style={styles.backgroundImage} source={{ uri: item.image }} >
                        <View style={styles.overlay}>
                          <Text style={styles.title}>{item.title}</Text>
                          <Text style={styles.excerpt}>{item.excerpt}</Text>
                          <Icon name="arrow-right" type="font-awesome" size={30} color='#ffffff' />
                        </View>
                      </ImageBackground>
                    </TouchableOpacity>
                  }
                />
              </View>
            );
          }
        }

Answer 2

我认为您缺少花括号和返回语句。

render() {
return (
  <View style={styles.container}>
    <FlatList
      data={servicesData}
      renderItem={(item) => {
        return (
          <TouchableOpacity style={styles.button}>
            <ImageBackground style={styles.backgroundImage} source={{ uri: 
            item.image }} >
              <View style={styles.overlay}>
                <Text style={styles.title}>{item.title}</Text>
                <Text style={styles.excerpt}>{item.excerpt}</Text>
                <Icon name="arrow-right" type="font-awesome" size={30} color='#ffffff' />
              </View>
            </ImageBackground>
          </TouchableOpacity>
        )
      }}
    />
  </View>
 );
}

Answer 3

您应该使用renderItem这样的方法。

renderItem={(info) => {
  const { item } = info;
  return (
    <TouchableOpacity style={styles.button}>
                  <ImageBackground style={styles.backgroundImage} source={{ uri: item.image }} >
                    <View style={styles.overlay}>
                      <Text style={styles.title}>{item.title}</Text>
                      <Text style={styles.excerpt}>{item.excerpt}</Text>
                      <Icon name="arrow-right" type="font-awesome" size={30} color='#ffffff' />
                    </View>
                  </ImageBackground>
                </TouchableOpacity>
);
}}

或者像这样。

renderItem={({ item }) => (
<TouchableOpacity style={styles.button}>
                  <ImageBackground style={styles.backgroundImage} source={{ uri: item.image }} >
                    <View style={styles.overlay}>
                      <Text style={styles.title}>{item.title}</Text>
                      <Text style={styles.excerpt}>{item.excerpt}</Text>
                      <Icon name="arrow-right" type="font-awesome" size={30} color='#ffffff' />
                    </View>
                  </ImageBackground>
                </TouchableOpacity>
)}

不确定为什么数据没有按预期呈现

3 个答案: