我是反应原生的新手。我正在构建复杂性,但却一直停留在从json列表中渲染FlatList项目。这对ListView工作正常,但无法弄清楚我在FlatList上缺少什么。
import React, { Component } from 'react';
import { ActivityIndicator, ListView, Text, View, StyleSheet,TouchableOpacity, FlatList } from 'react-native';
export default class Movies extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
}
}
componentDidMount() {
return fetch('https://gnosisdevelopment.com/office/list.json')
.then((response) => response.json())
.then((responseJson) => {
let data_source = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
isLoading: false,
dataSource: data_source.cloneWithRows(responseJson.office_staff),
}, function() {
// do something with new state
});
})
.catch((error) => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) =>
<Text style={styles.touchButtonText}>{item.staff_name} </Text>
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
alignContent:'center',
flexDirection: 'row',
flexWrap:'wrap',
justifyContent:'center',
},
touchButton:{
alignSelf:'center',
backgroundColor:'#2980b9',
paddingVertical: 25,
width:295,
margin:15,
},
touchButtonText:{
textAlign:'center',
color:'#ffffff',
fontWeight:'bold'
},
})
文本字段将处于可触摸状态,我将为按钮添加功能,但我想首先获得正确的列表。 欢迎任何建议。谢谢你的帮助:)
https://gnosisdevelopment.com/office/list.json
{
"title": "Welcome to our office",
"description": "Your smart office assistant",
"office_staff": [
{ "staff_name": "Dr. Bob"},
{ "staff_name": "Dr. Xavior"},
{ "staff_name": "Dr. Sanchez"},
{ "staff_name": "Dr. Robert"},
{ "staff_name": "Dr. Albert"}
]
}
使用新的数据源加载更新:
import React, { Component } from 'react';
import { ActivityIndicator, ListView, Text, View, StyleSheet,TouchableOpacity, FlatList } from 'react-native';
export default class Office extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
}
}
componentDidMount() {
return fetch('https://gnosisdevelopment.com/office/list.json')
.then((response) => response.json())
.then((responseJson) => {
// just setState here e.g.
this.setState({ dataSource: responseJson.office_staff, isLoading:false,});
})
.catch((error) => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) =><Text style={styles.touchButtonText}>{item.staff_name}</Text>
}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
alignContent:'center',
flexDirection: 'row',
flexWrap:'wrap',
justifyContent:'center',
},
touchButton:{
alignSelf:'center',
backgroundColor:'#2980b9',
paddingVertical: 25,
width:295,
margin:15,
},
touchButtonText:{
textAlign:'center',
color:'#ffffff',
fontWeight:'bold'
},
})
最终工作版本:
import React, { Component } from 'react';
import { ActivityIndicator, Text, View, StyleSheet,TouchableOpacity, FlatList } from 'react-native';
export default class Office extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
}
}
componentDidMount() {
return fetch('https://gnosisdevelopment.com/office/list.json')
.then((response) => response.json())
.then((responseJson) => {
// just setState here e.g.
this.setState({ dataSource: responseJson.office_staff,isLoading: false });
})
.catch((error) => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) =><Text>{item.staff_name}</Text>}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
alignContent:'center',
flexDirection: 'row',
flexWrap:'wrap',
justifyContent:'center',
},
touchButton:{
alignSelf:'center',
backgroundColor:'#2980b9',
paddingVertical: 25,
width:295,
margin:15,
},
touchButtonText:{
textAlign:'center',
color:'#ffffff',
fontWeight:'bold'
},
})
答案 0 :(得分:2)
您不需要像这样提供数据源。
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
}
}
componentDidMount() {
return fetch('https://gnosisdevelopment.com/office/list.json')
.then((response) => response.json())
.then((responseJson) => {
// just setState here e.g.
this.setState({
dataSource: responseJson.office_staff,
isLoading: false,
});
})
.catch((error) => {
console.error(error);
});
}