概率白屏

[J3020605821]

问题：概率白屏 "react-native-echarts-pro": "^1.8.7", "react-native": "0.69.6", "react-native-webview": "11.23.0", 平台;linux 系统版本;Ubuntu 20.04.4 LTS 究竟那里出了问题

[J3020605821]

只是切换下路由，有时就会什么也不显示 正常时： 白屏时:

[supervons]

请参考 https://github.com/supervons/react-native-echarts-pro/issues/6 提供下示例代码，以及机型型号，方便快速定位。

[J3020605821]

import React from "react"; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import Charts1 from "../../component/Charts2/index2"; import Charts2 from "../../component/Charts2/index2"; import Charts3 from "../../component/Charts2/index4"; import Charts4 from "../../component/Charts2/index5"; const Stack = createBottomTabNavigator(); const Template: React.FC<{}> = () => { return ( <> <Stack.Navigator screenOptions={{ headerShown: false, tabBarStyle: { display: "none" } }}> <Stack.Screen name="feeding" component={Charts1} options={ { title: "图表1" } } /> <Stack.Screen name="lineTail" component={Charts2} options={ { title: "图表2" } } /> <Stack.Screen name="halt" component={Charts3} options={{ title: "图表3",unmountOnBlur:true}} /> <Stack.Screen name="trayOver" component={Charts4} options={{ title: "图表4",unmountOnBlur:true} } /> </Stack.Navigator> </> ) } // 使用的navigation.navigate(“name”)跳转的 //组件里写本教程的案例，图表位置也会出现空白问题 //问题出在那里？

[J3020605821]

使用的expo go 打开的

[supervons]

找到原因了吗？抱歉噢，最近有点忙，最好Charts1 ~ Charts4 也提供下吧，方便快速复现。

[J3020605821]

只知道图表空白时,执行echartsRef.current?.getInstance("getOption").then((res:any)=>{ console.log("res",res); });是不打印的.图表显示时是可以打印的. Charts1 ~ Charts4里的都差不多,大概是这样: const { data, refetch, loading } = useStatFeedingsUsingGET({}})//接口,data是个状态,请求未完成是null,完成是请求的内容 const pieOption = React.useMemo(() =>{ return ... },[data])

<RNEChartsPro ref={myChart} height={250} option={pieOption} /> 问题是:首次进入到路由时可能图表白屏,切换路由时也可能白屏 目前我使用防止的方法是等接口请求完成后再显示图表:

{data?<RNEChartsPro ref={myChart} height={250} option={pieOption} />:null}

难道是createBottomTabNavigator的原因，试了试createNativeStackNavigator几次图表都显示出来了

[supervons]

只知道图表空白时,执行echartsRef.current?.getInstance("getOption").then((res:any)=>{ console.log("res",res); });是不打印的.图表显示时是可以打印的. Charts1 ~ Charts4里的都差不多,大概是这样: const { data, refetch, loading } = useStatFeedingsUsingGET({}})//接口,data是个状态,请求未完成是null,完成是请求的内容 const pieOption = React.useMemo(() =>{ return ... },[data])

<RNEChartsPro ref={myChart} height={250} option={pieOption} /> 问题是:首次进入到路由时可能图表白屏,切换路由时也可能白屏 目前我使用防止的方法是等接口请求完成后再显示图表:

{data?<RNEChartsPro ref={myChart} height={250} option={pieOption} />:null}

难道是createBottomTabNavigator的原因，试了试createNativeStackNavigator几次图表都显示出来了

可能是由于图表的渲染早于接口数据返回了，在判断这里增加上 pieOption 数据的判断，有值时才进行渲染。