在使用 React 渲染之前初始化数据

Question

I'm a beginner in react native. In my project, I need to set data before rendering it and return the data.

Can help me? thanks.

async function ReadData() {
   var RNFS = require('react-native-fs');
try {
if (await RNFS.exists(RNFS.DocumentDirectoryPath + '/logindata.json')) {
  var path = RNFS.DocumentDirectoryPath + '/logindata.json';
  var Status = await RNFS.readFile(path, 'utf8')
  var login = JSON.parse(Status)
  if (login.is_login == true) {
    return true
  } else {
    return false
  }
 } else {
  return false
 }
} catch{
 return false
}
}
const App = () => {
useEffect( () => {
var Login=ReadData()    
SetDirection();
SplashScreen.hide();
console.log(Login)
}, []);

Answer 1

This is not the way it works with React. React will render your UI immediately and update automatically when the data is loaded or updated.

However, you can hide the splash screen when the data is finished loading. App can pass a callback to ReadData and ReadData will call this callback when data is ready, then App can hide the splash screen.

App

useEffect( () => {
  const Login=ReadData(onDataReady)
  ...

onDataReady = () => {
  SplashScreen.hide();
  ....
}