如何访问FlatList中的模拟数据数组反应原生

Question

export const Artists = [
{
  name: "Breakbot",
  songs: [
    {
      title: "Star Tripper",
      album: "Still Waters",
    },
    {
      title: "You Should Know (feat. Ruckazoid)",
      album: "Still Waters",
    },
  ]
},]

上面是模拟数据数组，它在另一个文件中定义。我已在另一个文件中声明了flatlist。

Answer 1

SmapleScreen.js

＆＃13;

＆＃13;

import React, { Component } from 'react'
import { Text, View, FlatList, TouchableOpacity, RefreshControl } from 'react-native'
import { connect } from 'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Fonts, Colors, Images, Metrics } from '../Themes'
import MockData from "./mockData"


// Styles
import styles from './Styles/OrdersScreenStyle'

class SampleScreen extends Component {


  constructor(props) {
    super(props);
    this.state = {
  
    }
 
  }


  componentWillMount() {
    
  }


  render() {
    // console.log(this.props.order_details.new_orders,'refreshed' )
    return (
      (this.props.order_details.new_orders == null || this.props.order_details.new_orders.length == 0) ?
        <View style={{ flex: 1, justifyContent: "center", backgroundColor: Colors.snow }}>
          <Text style={{ alignSelf: 'center' }}>
            You do not have any orders.
             </Text>
        </View>
        :
        <View style={{ flex: 1, flexDirection: 'column', justifyContent: "flex-start" }}>
          <View style={{ padding: 10, flexDirection: 'row' }}>
            <Text style={{ flex: 3 }}>Scheme</Text>
            <Text style={{ flex: 2 }}>Amount</Text>
          </View >
          <FlatList
            style={styles.container}
            data={MockData}
            keyExtractor={(item, index) => index}
            renderItem={(item) => this.getOrderComponent(item)}
   
          />
          <View>
            <PrimaryButton label="Make Payment"
              disabled={this.props.submitFetching} fetching={this.props.submitFetching} onPress={this.onMakePaymentClick} />
          </View >
        </View>
 )
  }
  
  getOrderComponent=(item)=>{
     return (
       <View>
          <Text>{item.name}</Text>
       </View>
      )
  }

}


const mapStateToProps = (state, ownProps) => {
  return {
  
  }
}



const mapDispatchToProps = (dispatch) => ({


})

export default connect(mapStateToProps, mapDispatchToProps)(SmapleScreen)

＆＃13;

＆＃13;

＆＃13;

MockData.js

＆＃13;

＆＃13;

const data =[
      {
        name: "Breakbot",
        songs: [
          {
            title: "Star Tripper",
            album: "Still Waters",
          },
          {
            title: "You Should Know (feat. Ruckazoid)",
            album: "Still Waters",
          },
        ]
      },
]

export default data

＆＃13;

＆＃13;

＆＃13;