ここでネイティブの初心者に反応します。Flatlist による実験的なプログラムの表示値と上部の Select ヘッダーがあります。ドロップダウンから値を選択しようとすると、最初のロードでフラットリストが正常に表示され、Flastlist に現在の配列データが表示されません。ロードされない理由はありますか？
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import {Select, Option} from "react-native-chooser";
import FlatList from 'react-native/Libraries/Lists/FlatList';
import demoData from './data';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Property Listing',
};
constructor(props) {
super(props);
this.state = {
item: [],
refreshing: false
};
}
componentWillMount() {
this.makeRemoteRequest({refreshing: false});
}
makeRemoteRequest = (data1) => {
this.setState({refreshing: true});
const item = [];
for (let i = 0; i < data.length; i++) {
let obb = data[i].location.state;
if(data1===obb) {
item.push(data[i]);
}
this.setState({refreshing: false});
}
console.log(item);
return item;
};
handleRefresh = () => {
this.setState({refreshing: true},
() => {
this.makeRemoteRequest();
}
);
};
renderHeader = () => {
return (
<Select
onSelect = {this.makeRemoteRequest.bind(this)}
defaultText = "Select a State"
style={styles.selectWrapper}
optionListStyle = {{backgroundColor : "#F5FCFF"}}>
<Option value = "Arizona">Arizona</Option>
<Option value = "California">California</Option>
<Option value = "New Hampshire">New Hampshire</Option>
</Select>
);
};
renderItem({item, index }) {
return(
<View style={styles.container2}>
<View><Image source={{ uri: item.picture}} style={styles.photo} /></View>
<View style={styles.info}>
<View><Text style={styles.headline}>Address:</Text></View>
<View><Text style={styles.text}>{`${item.location.street} ${item.location.city} ${item.location.state} ${item.location.postcode}`}</Text></View>
<View><Text>Bed: {`${item.houseDetails.bed} Bath: ${item.houseDetails.bath} Rent: $${item.houseDetails.monthlyRent}`}</Text></View>
</View>
</View>
);
}
render() {
return (
<View style={styles.container}>
<FlatList style={styles.container} data={demoData} renderItem={this.renderItem} ListHeaderComponent={this.renderHeader} refreshing={this.state.refreshing} onRefresh={this.handleRefresh} keyExtractor={item => item.email}/>
</View>
);
}
}
const HomeView = StackNavigator({
Home: { screen: HomeScreen },
});
const styles = StyleSheet.create({
container: {
flex: 1,
},
container2: {
flexWrap: 'wrap',
padding: 10,
backgroundColor: '#F0F0F0',
borderColor: '#8E8E8E',
borderWidth: StyleSheet.hairlineWidth,
},
selectWrapper: {
flexWrap: 'wrap',
padding: 10,
backgroundColor: '#F0F0F0',
borderColor: '#8E8E8E',
borderWidth: StyleSheet.hairlineWidth,
margin: 10,
width: 340,
},
separator: {
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: '#8E8E8E',
},
headline: {
fontWeight: 'bold',
},
text: {
fontSize: 16,
textAlign :'left',
},
photo: {
width: 340,
height: 210,
borderRadius: 2,
},
info: {
padding: 10,
},
});
AppRegistry.registerComponent('AwesomeProject3', () => HomeView);
アイデアに感謝します。数日間これにこだわっています。助けが必要だと思います。ありがとうございました！
=== JSON データファイルの更新が追加されました
ファイル名: data.js
デフォルトデータのエクスポート = [
{
"性別男性"、
"名前"： {
"タイトル": "さん",
"first": "エイデン",
"最後": "ルーカス"
}、
"email": "aiden.lucas@example.com",
"電話": "(661)-131-8187",
"セル": "(408)-707-4720",
"家の詳細": {
"ベッド": "1",
"お風呂": "1",
"面積": "1100平方フィート",
"月額賃料": '2800'
}、
"位置"： {
"street": "1446 Oak Lawn Ave",
"市": "レイクウッド",
"state": "アリゾナ",
"郵便番号": 60649
}、
"picture": "https://maps.googleapis.com/maps/api/streetview?location=37.730064,-122.4245857&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
}、
{
"性別男性"、
"名前"： {
"タイトル": "さん",
"最初": "マリオ",
"最後": "ウォルターズ"
}、
"email": "mario.walters@example.com",
"電話": "(612)-481-1846",
"セル": "(213)-966-9760",
"家の詳細": {
"ベッド": "2",
"お風呂": "1",
"面積": "970 平方フィート",
"月額賃料": '2500'
}、
"位置"： {
"street": "266 Ney St",
"都市": "サンフランシスコ",
"state": "カリフォルニア",
"郵便番号": 60649
}、
"picture": "https://maps.googleapis.com/maps/api/streetview?location=37.7379437,-122.3875249&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
}、
{
"性別男性"、
"名前"： {
"タイトル": "さん",
"最初": "ジョセフ",
「最後」：「ランバート」
}、
"email": "joseph.lambert@example.com",
"電話": "(481)-952-7376",
"セル": "(249)-044-4521",
"家の詳細": {
"ベッド": "2",
"お風呂": "1",
"面積": "986平方フィート",
"月額賃料": '3500'
}、
"位置"： {
"street": "2673 W Pecan St",
"city": "サリー",
"state": "ニューハンプシャー",
"郵便番号": 12183
}、
"picture": "https://maps.googleapis.com/maps/api/streetview?location=37.7352032,-122.3979859&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
}、
{
"性別女性"、
"名前"： {
"タイトル": "さん",
"first": "ティナ",
"最後": "ジェニングス"
}、
"email": "tina.jennings@example.com",
"電話": "(938)-316-5866",
"セル": "(524)-445-7740",
"家の詳細": {
"ベッド": "1",
"お風呂": "1",
"面積": "200 平方フィート",
"月額賃料": '1200'
}、
"位置"： {
"street": "600 Los Palmos Dr",
"都市": "サンフランシスコ",
"state": "カリフォルニア",
"郵便番号": 60649
}、
"picture": "https://maps.googleapis.com/maps/api/streetview?location=37.7349324,-122.4555814&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
}、
];
UPDATE--- 配列の値を表示する方法は既に理解しています。以下のフラットリストを調整し、set.state を実行して配列値を更新します。