Я использую реагирование на нативном языке и пытаюсь отобразить простой плоский список на основе данных, которые я выбрал, используя API выборки.
Ниже приведен код -
class CategoryList extends React.Component
{
constructor(props)
{
super(props);
var context = this;
this.state = {
categories: []
}
}
componentDidMount()
{
fetch(api_config.url + api_config.routes.all_top_level_categories)
.then(response => response.json())
.then(data => this.setState({ categories: data}))
.catch(e => console.log(e));
}
renderFlatListItem(data)
{
return(<View style={styles.item}>
<Text>{data.item.name}</Text>
</View>);
}
renderItemSeparator()
{
return(
<View
contentContainerStyle={styles.itemSeparator} />
);
}
render() {
return (
<FlatList contentContainerStyle={styles.list}
data={this.state.categories}
renderItem={(data) => this.renderFlatListItem(data)}
ItemSeparatorComponent={this.renderItemSeparator}
keyExtractor={data => data.name}
/>
);
}
}
export default class HomeScreen extends React.Component
{
static navigationOptions = ({ navigation }) => {
return {
title: 'Home',
}
};
render() {
return (
<CategoryList />
);
}
}
Ниже приведено изображение для Android -
Ниже приведеноИзображение для iOS -
Любая помощь по этой теме будет принята с благодарностью.Спасибо.