Question

我刚刚了解到React Native中有一个flatList。我有一个服务列表，当用户点击每个服务时，它们被重定向到这些服务可用的地址。我试图在FlatList中显示这些地址。服务列表的屏幕截图如下：

当用户点击测试服务时，我想以FlatList的形式显示地址。我不确定，但是我在flatList中显示的内容没有显示在页面上。以下是我的整个代码，包括flatlist：

     /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ScrollView, TouchableOpacity, Linking, Button, FlatList } from 'react-native';
import { connect } from 'react-redux';
import { getTheme } from 'react-native-material-kit';
import EvilIcon from 'react-native-vector-icons/EvilIcons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
import * as actions from '../actions';
import getDirections from 'react-native-google-maps-directions'
const theme = getTheme();

const styles = StyleSheet.create({
  card: {
    marginTop: 10,
    paddingBottom: 20,
    marginBottom: 20,
    borderColor: 'lightgrey',
    borderWidth: 0.5,
  },

  container: {     
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#4F6D7A', 
    height: 500,
    alignSelf:'center',
    width:500,
    position: 'relative',
    marginTop: 5,
    top: 10
  }, 

  title1: {
      top: 10,
      left: 80,
      fontSize: 24,
  },
  title2: {
      top: 35,
      left: 82,
      fontSize: 18,
  },
  image: {
      flex: 0,
      height: 100,
      width: 333,
      backgroundColor: 'transparent',
      justifyContent: 'center',
      alignItems: 'center',
  },
  closeIcon: {
      position: 'absolute',
      top: 5,
      left: 295,
      color: 'black'

  },  
  icon: {
      position: 'absolute',
      top: 15,
      left: 0

  },
  textArea: {
      flexDirection: 'row',
      paddingLeft: 20,
      paddingTop: 10,
      width: 260,
  },
  textIcons: {
      color: '#26a69a',
  },
  actionArea: {
      paddingTop: 10,
      flexDirection: 'row',
      justifyContent: 'space-around',
      alignItems: 'center',
  },

  title:{
    justifyContent: 'center',
    paddingTop: 10,
    alignItems: 'center',
    alignSelf: 'center',
    fontWeight: 'bold',
    fontSize: 22,
    color: 'black'
    },

    SerContent:{
        fontWeight: 'bold',
        fontSize: 16,
        paddingTop: 10,
        alignSelf: 'center',
        color: 'black'
    },

    underLineText: {
        fontSize: 17,
        textDecorationLine: 'underline',
        color: 'black',
        fontWeight: 'bold',
        alignSelf: 'center'


      },

      dir:{
        flexDirection:'row',
        paddingTop: 30,
        alignSelf: 'center',



    } , 

    dirAddr:{
        flexDirection:'column',
        paddingTop: 30,

        alignSelf: 'center'


    },

    Address1:{
        alignSelf: 'center',
        marginRight: 20,
        fontSize: 17,
        fontWeight: 'bold',
        color: 'black'
    },

    fullAddress:{

        marginRight: 20,

        fontWeight: 'bold',
        color: 'black'
    },
    toolbar:{
        flexDirection:'row' ,   //Step 1

    },
    toolbarTitle:{
        width: 10,
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        flex:1                //Step 3
      },
      buttonShape:{

        margin: 40,
        width:160,
        marginLeft: 80,
        backgroundColor:'#00BCD4',


    },



producetBox:{
        margin:10, 
        fontWeight:'bold',
        color:'#000',
        alignSelf:'center'

},

price:{

    padding:5,
    margin:10,
    borderColor:'orange',
    borderBottomWidth: StyleSheet.hairlineWidth,
}

});



class ServiceDetail extends Component {
    handleClick = (link) => {
        Linking.canOpenURL(link).then(suppported => {
            if (supported) {
                Linking.openURL(link);
            } else {
                console.log('Don\'t know how to open URI: ' + link);
            }
        });
    };


    constructor(props) {
        super(props);

        this.state = {
          latitude: null,
          longitude: null,
          error: null,
        };
      }

 componentDidMount()
 {
    navigator.geolocation.getCurrentPosition(
        (position) => {
          this.setState({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            error: null,
          });
        },
        (error) => this.setState({ error: error.message }),
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
      );

 }



  render() {





var online="";
var destUrl = 'https://www.google.com/maps/dir/Current+Location/' +  this.props.services.destAddr1 ;

var destUrl1 ='https://www.google.com/maps/dir/Current+Location/' +  this.props.services.destAddr2 ;


var Online=  this.props.services.onlineURL;

return (


     <View>
      <View style={styles.toolbar}>
            <Image 
                 resizeMode='contain'
                 style={styles.toolbarTitle} 
                source={require('../Resources/AcrLogoWithDesc.jpg')} />
         </View>
         <View>

             <Text  style={styles.title}>{this.props.services.ser}</Text>
            <Text style={styles.SerContent} >Service is available in the following locations:</Text>
        </View>

        <View>
        <FlatList
           data={this.props.services}
            renderItem={({item})=>
            <View>
              <Text>{item.ser}</Text>
             </View>

        }
        />
        </View>

        <View style={styles.buttonShape}>
            <Button  onPress={() => this.props.noneSelected()} title = 'Close'/>
       </View>


   </View>



  );
}
}



const mapStateToProps = state => {
    return { 
        services: state.serviceSelected
     };
  };



export default connect(mapStateToProps, actions)(ServiceDetail);

I can see the content of {this.props.services.ser}, but I cannot see the content of  <Text>{item.services.ser}</Text> which is inside the flatList. below is the screen shot of the service details when the user taps on Test service:

Item.services.serv内容未出现在我的第二个屏幕截图中。下面是我的JSON和生成的屏幕文件的屏幕截图“：

[

{
    "id":0,
    "ser": "Test Service",
    "Location": "TestLoc",
    "Phone1":"(999)-999-5050",
    "SecondLoc": "TestLoc2",
    "email":"test@test.com",
    "sourceLat":"33.977806",
    "sourceLong":"-117.373261",
    "destLatL1":"33.613355",
    "destLongL1":"-114.596569",
    "destLatL2":"33.761693",
    "destLongL2":"-116.971169",
    "destAddr1": "Test Address, Test Drive",
    "destAddr2": "Test Address2, Test Drive2",
    "onlineURL":"",
    "Phone2": "(900)-900-3333"
  },

  [1]: https://i.stack.imgur.com/xiZMp.png

任何帮助都将受到高度赞赏。我尝试了flatList

以下的东西

<View>
        <FlatList
           data={this.props.services}
           keyExtractor={(item, index) => item.services.id}
            renderItem={({item})=>
            <View>
              <Text>{item.ser}</Text>
             </View>

        }
        />
        </View>

这是我尝试的另一种方式：

  <View>
        <FlatList
            style={{}}
                data={this.props.services}
                keyExtractor={(item, index) => item.key}
                renderItem={(rowData) =>this.RenderFeedCard(rowData)}
        />
        </View>

Answer 1

我假设您提供的JSON是针对this.props.services的。所以renderItem中的调用= {（{item}）=＆gt; {item.services.ser}应该是{item.ser}。

原因是因为Flatlist'data'采用数组（例如：this.props.services）和'renderItem'将获取数组的每个项目（this.props.services [0]）并对其执行某些操作。所以你只需要写{item.ser}来获取字符串。

Answer 2

renderItem={({item})=>(
  <View>
  <Text>{item.ser}</Text>
  </View>
)}

React Native中的FlatList不显示任何内容

2 个答案: