FlatList内のモックデータ配列へのアクセス方法ネイティブ

Question

上記は別のファイルで定義されているモックデータ配列です。私は別のファイルでフラットリストを宣言しました。

Answer 1

SmapleScreen.js

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)

MockData.js

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

 
export default data