React Native:我在显示页面中获取原始数据 [英] React Native: I getting raw data in display page
本文介绍了React Native:我在显示页面中获取原始数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在我的仪表板页面中显示 staff_name
.数据正在显示,但它显示的是原始数据.我能知道怎么解决吗.
I'm trying to display staff_name
in my dashboard page. The data is displaying but it's displaying raw. Can I know how to solve it.
API 代码(获取 URL)
API code(fetch URL)
method: 'GET',
headers: {
'Authorization': 'Bearer '+ token,
}
})
.then(response => response.json())
.then((json) => {
// alert(json)
if (json.error) {
alert(json.error);
} else {
this.setState({
staffLeave: json.data,
isLoading: false
});
}
})
.catch((err) => {
console.log(err)
alert(err)
// alert(strings.data_fail);
})
this.setState({ view_access: true })
}
我在 POSTMAN 中检查的 API 结果
API Result that i checked in POSTMAN
渲染数据
{this.state.view_access == false
? <NoAccessScreen></NoAccessScreen>
: this.state.isLoading
? <View style={[components.alignCenter, components.justifyCenter, components.pad_10]} >
<ActivityIndicator />
</View>
: <FlatList
data={this.state.staffLeave}
renderItem={({ item, index }) =>
this.state.text == null || item.staff_name.toLowerCase().includes(this.state.text.toLowerCase())
? (this.state.Startdate == null || Moment(Moment(item.date_from, "YYYY-MM-DD").startOf('day')).isSameOrAfter(Moment(this.state.Startdate, "YYYY-MM-DD"), 'day')) &&
(this.state.Enddate == null || Moment(Moment(item.date_to, "YYYY-MM-DD").startOf('day')).isBefore(Moment(this.state.Enddate, "YYYY-MM-DD"), 'day'))
? <TouchableOpacity style={[components.flatview, { marginTop: 5 }]} onPress={() => navigate('LeaveDetailScreen', { id: item.id })}>
<View style={[components.listContainer]} >
<View style={components.cardContainer}>
<View style={[components.dotContainer]} >
<View style={[components.flex_row, components.justifyAlignStart, { padding: 5 }]}>
<View style={{ width: '75%' }}>
{
item.staff_name != null
? <Text style={[components.titleTextStyle]}>{item.staff_name}</Text>
: null
}
</View>
{
item.date_from != null
? <View style={{ width: '25%' }}>
<Text style={[components.titleTextStyle, { fontSize: 13 }]}>{Moment(item.date_from).format("D MMM YYYY")}</Text>
</View>
: null
}
</View>
</View>
</View>
</View>
</TouchableOpacity>
: null
: null
}
keyExtractor={(item, index) => index.toString()}
extraData={this.state}
nestedScrollEnabled={true}
/>
}
输出为
推荐答案
您是否尝试过使用 WebView 而不是 Text 这样的东西:
have you try to use WebView instead of Text something like this :
<WebView style={[components.titleTextStyle]} html={item.staff_name}/>
https://reactnative.dev/docs/webview.html#html
这篇关于React Native:我在显示页面中获取原始数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文