Question

我正在尝试在我的仪表板页面中显示staff_name。数据正在显示，但正在显示原始数据。我能知道怎么解决吗。

API代码（获取网址）

            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结果

渲染数据

 {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}
                                />
                        }

输出为

Answer 1

您尝试使用WebView代替Text这样的东西吗？

<WebView style={[components.titleTextStyle]} html={item.staff_name}/>

https://reactnative.dev/docs/webview.html#html

Answer 2

首先，为什么要从api获取整个组件这不是建议的模式。您不能在react-native内部呈现html 如果将字符串传递给组件，它将仅将其视为字符串，而不是任何组件

您可以从api获取诸如url，type等之类的道具，并以仅与组件中的所有业务逻辑相对应的方式呈现您自己的组件

React Native：我在显示页面中获取原始数据

2 个答案: