[英]Parsing JSON file from LocalStorage in to react-native
I've been trying to extract data from my local JSON file, but with no success. 我一直在尝试从本地JSON文件提取数据,但是没有成功。 I've tried almost everything, but it doesn't work.
我已经尝试了几乎所有内容,但是没有用。 Am I missing something or just not doing it right?
我错过了什么还是只是做错了? I will be very glad if someone can resolve my issue.
如果有人能够解决我的问题,我将感到非常高兴。 Normally on the error manager, it is displayed an error : [ts] JSX Expressions must have one parent element [2657] , but it is not shown on which line is the problem.
通常,在错误管理器上,它会显示一个错误: [ts] JSX表达式必须具有一个父元素[2657] ,但未在问题所在的行上显示。
HistoryScreen.js HistoryScreen.js
const Page = ({
fromLeft,
type,
parallaxOn,
flipSide,
nextType,
openDrawer,
}) => (
<View style={styles.page}>
<RectButton style={styles.rectButton} onPress={openDrawer}>
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
<FlatList
data={this.state.dataSource}
renderItem = { ( {item}) => {
return(
<View style={{width: 60}}>
<Avatar
style={{flex: 0}}
size='large'
rounded
activeOpacity={0.7}
source={require('../components/avatars/club1.png')} />
</View>
<View>
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={styles.rectButtonText}><Text>{item.name}</Text></View>
<View style={styles.rechtButtonTextNoteNote}><Text note >{item.date}</Text></View>
</View>
<Text note style={styles.rechtButtonTextNote}>{item.info}</Text>
</View>
)
}}
keyExtractor = {(item, index) => index.toString()}
/>
</View>
</RectButton>
HistoryScreen.js HistoryScreen.js
export default class History extends Component {
constructor(props){
super(props);
this.state = {
isLoading: true, // check if json data (online) is fetching
dataSource: [], // store an object of json data
};
}
componentDidMount(){
// set state value
this.setState({
isLoading: false , // already loading
dataSoure : data.info
});
}
and here is my JSON file info.json 这是我的JSON文件info.json
{
"info-club" : [
{"name" : "Club-Defense Veterans" , "info" : "Pistolet , Carabine..." , "date" : "Fri May 04 2012 14:42:07 GMT-0070 (PDT)"},
{"name" : "Club-Reflex Shooting" , "info" : "Pistolet , Carabine...", "date" : "Fri May 04 2012 14:42:07 GMT-0070 (PDT)"},
{"name" : "Club-Super Shooting" , "info" : "Pistolet , Carabine...", "date" : "Fri May 04 2012 14:42:07 GMT-0070 (PDT)"}
]
}
FlatList renderItem
accepts React.Element
and not multiple elements therefore you can wrap your elements in React.Fragment
. FlatList
renderItem
接受React.Element
而不是多个元素,因此您可以将元素包装在React.Fragment
。
renderItem = { ( {item}) => {
<React.Fragment>
{..// Rest of your Code}
</React.Fragment>
}
Hi the data
prop of FlatList
component accepts only array of values. 嗨,
FlatList
组件的data
FlatList
仅接受值数组 。 But you are generating an object in your info.json file. 但是,您正在info.json文件中生成一个对象 。 You could try somenthing like this.
您可以尝试这样的事情。 It should be enough if you know the property name of the json file that you are trying to render.
如果您知道要呈现的json文件的属性名称,就足够了。
I have created a minimal Expo example where you could see that it works. 我创建了一个最小的Expo示例 ,您可以在其中看到它的工作原理。
import * as React from 'react';
import {
View,
StyleSheet,
TextInput,
Dimensions,
FlatList
} from 'react-native';
export default class App extends React.Component {
constructor(props){
super(props);
this.state={
data: require('./info.json') // load the file
}
}
render() {
const { data } = this.state // state in a local const
return (
<View style={styles.container}>
<FlatList
data={data['info-club']} // info-club prop of the json object
keyExtractor={(item, index) => index.toString()}
renderItem={ ({item, index}) => {
// you custom logic here
return (
<View> { /* I think you are missing that View Tag */}
<View style={{width: 60}}>
<Avatar
style={{flex: 0}}
size='large'
rounded
activeOpacity={0.7}
source={require('../components/avatars/club1.png')}
/>
</View>
<View>
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={styles.rectButtonText}><Text>{item.name}</Text></View>
<View style={styles.rechtButtonTextNoteNote}><Text note >{item.date}</Text></View>
</View>
<Text note style={styles.rechtButtonTextNote}>{item.info}</Text>
</View>
</View>
)
}}
>
</FlatList>
</View>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.