React native custom view
Я разрабатываю приложение, в котором пользователь добавляет имя элемента, описание, количество и URL-адрес изображения, и оно сохраняется в AsyncStorage. Я сделал это готово, и это выглядит так:
Теперь я пытаюсь получить его с Asyncstorage и получаю 2D-массив. Вот код:
myA1 = await AsyncStorage.getItem('key1');
var ee=JSON.parse(myA1); //ee is 2D array
Это выглядит так
[[imgurl1 itemname1, desc1, quantity1],
[imgurl2 itemname2, desc2, quantity3],
[imgurl3 itemname3, desc2, quantity3],
[imgurl4 itemname4, desc2, quantity3]]
Как я могу этого добиться ?? Я новичок в реакции на родных
Я хочу отобразить это следующим образом
:@AliSn да, сэр.
Ответы 2
Вы можете использовать FlatList для визуализации списка данных. У него есть опора renderItem, с помощью которой вы можете передать представление для рендеринга каждой такой строки данных. Приведите ваши данные в состояние (data в этом коде). Вот пример:
makeContentItem(item) {
return (
<TouchableOpacity
onPress = {() => {
//Do sth when clicking on a row
}}>
<View style = {{ width: '90%', height: 140, marginBottom: 5, borderRadius: 2, backgroundColor: 'white' }}>
<View style = {{ flex: 1, flexDirection: 'row' }}>
<Image style = {{ width: 40, height: 40 }} source = {require(item.imgurl)} />
<View>
<Text>{item.itemname}</Text>
<Text>{item.desc}</Text>
<Text>{item.quantity}</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
}
render() {
return (
<FlatList
data = {this.state.data}
renderItem = {({ item, index }) => {
return this.makeContentItem(item)
}
/>
)
}
Вы можете изменить стиль, чтобы добиться желаемого. также вы можете взглянуть на FlatList
Надеюсь, это поможет
Решение не отображает пустые представления. текст или изображение не отображаются
Это не точный источник. Вы можете использовать FlatList для отображения массива объектов данных, и вы можете определить представление каждой строки с помощью renderItem prop. он дает вам текущий элемент рендеринга, и вы можете появиться. например, ваш элемент может иметь imgurl, имя элемента, описание и количество. Для более простого примера вы можете сначала прочитать и протестировать примеры из документации React Native о flatlist в facebook.github.io/react-native/docs/flatlist.html.
renderEditAndClose() {
return(
<View style = {{flex:1, flexDirection: "row", justifyContent: "flex-end"}}>
{this.renderEditImage()}
{this.renderCloseImage()}
</View>
);
}
renderImageAndItemData(item: Object) {
return(
<View style = {{flex:1, flexDirection:"row"}}>
{this.renderItemImage()}
{this.renderItemData(item)}
</View>
);
}
renderItemImage(width: number, height: number, url: string) {
return (
<Image style = {{ width: width, height: height }} source = {{uri: url}} />
);
}
renderItemData(item: Object) {
return(
<View>
<View style = {{flex: 1, flexDirection: "row", justifyContent: "space-around"}}>
<Text>{item.name}</Text>
<Text>{item.quantity}</Text>
</View>
<Text>{item.description}</Text>
</View>
);
}
renderRow(item: Object) {
return() {
<View>
{this.renderEditAndClose()}
{this.renderImageAndItemData(item)}
</View>
}
}
render() {
return (
<FlatList data = {ee}
renderItem = {(item) => this.renderRow(item)} />
);
}
Было бы хорошо снабдить ваш код пояснительными примечаниями, чтобы люди могли лучше искать или лучше понимать, что вы делаете.
Ваш вопрос в том, как сделать ваши данные похожими на картинку? я имею в виду, как показать данные в списке?