在 reac-native 中显示 json 数据 parent 和两个使用 sectionlist/flatlist 的孩子
Displaying json data with parent and two childs using sectionlist/flatlist in reac-native
我在 react-native 网络方面还是新手,我想使用 sectionlist 显示 json 数据
这是我的代码
import * as React from 'react';
import { Button, View ,Pressable,Text,StyleSheet,ActivityIndicator,FlatList,SectionList} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Component } from 'react/cjs/react.production.min';
const Drawer = createDrawerNavigator();
const Stack=createStackNavigator();
export default class ScreenA extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
isLoading: true
};
}
async getData() {
try {
const response = await fetch('https://mocki.io/v1/d479a871-9165-45a1-a43d-cd2ae3e68845');
const json = await response.json();
this.setState({ data: json });
} catch (error) {
console.log(error);
} finally {
this.setState({ isLoading: false });
}
}
componentDidMount() {
this.getData();
}
render() {
const { data, isLoading } = this.state;
return (
<View style={{ flex: 1, padding: 24 }}>
{isLoading ? <ActivityIndicator/> : (
<FlatList
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<Text>{item.firstName}, {item.lastName}</Text>
)}
/>
)}
</View>
);
}
};
Json link:https://mocki.io/v1/d479a871-9165-45a1-a43d-cd2ae3e68845
拜托,任何帮助都会提前appreciated.Thanks
我想应该是这样吧
<FlatList
data={this.state.data} // you should add this.state
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<Text>{item.firstName}, {item.lastName}</Text>
)}
/>
我在 react-native 网络方面还是新手,我想使用 sectionlist 显示 json 数据 这是我的代码
import * as React from 'react';
import { Button, View ,Pressable,Text,StyleSheet,ActivityIndicator,FlatList,SectionList} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Component } from 'react/cjs/react.production.min';
const Drawer = createDrawerNavigator();
const Stack=createStackNavigator();
export default class ScreenA extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
isLoading: true
};
}
async getData() {
try {
const response = await fetch('https://mocki.io/v1/d479a871-9165-45a1-a43d-cd2ae3e68845');
const json = await response.json();
this.setState({ data: json });
} catch (error) {
console.log(error);
} finally {
this.setState({ isLoading: false });
}
}
componentDidMount() {
this.getData();
}
render() {
const { data, isLoading } = this.state;
return (
<View style={{ flex: 1, padding: 24 }}>
{isLoading ? <ActivityIndicator/> : (
<FlatList
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<Text>{item.firstName}, {item.lastName}</Text>
)}
/>
)}
</View>
);
}
};
Json link:https://mocki.io/v1/d479a871-9165-45a1-a43d-cd2ae3e68845 拜托,任何帮助都会提前appreciated.Thanks
我想应该是这样吧
<FlatList
data={this.state.data} // you should add this.state
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<Text>{item.firstName}, {item.lastName}</Text>
)}
/>