为什么React Native WebView中的JavaScript总是需要设置超时？

我正处于react native的学习阶段，正在测试react native WebView文档中提供的示例代码

import { View } from 'react-native';
import { WebView } from 'react-native-webview';

export default class App extends Component {
  render() {
    const run = `
      document.body.style.backgroundColor = 'blue';
      true;
    `;

    setTimeout(() => {
      this.webref.injectJavaScript(run);
    }, 3000);

    return (
      <View style={{ flex: 1 }}>
        <WebView
          ref={r => (this.webref = r)}
          source={{ uri: 'https://logrocket.com/' }}
        />
      </View>
    );
  }
}

从'react native'导入{View}；
从“react native WebView”导入{WebView}；
导出默认类应用程序扩展组件{
render（）{
常量运行=`
document.body.style.backgroundColor='蓝色'；
是的；
`;
设置超时（（）=>{
this.webref.injectJavaScript（运行）；
}, 3000);
返回(
（this.webref=r）}
source={{uri:'https://logrocket.com/' }}
/>
);
}
}

如果我没有包装

this.webref.injectJavaScript（运行）

在

setTimeout（）

方法中，javascript没有执行

我的问题是如何识别页面是否已加载，以便在页面加载完成后立即安全地执行javascript（无需包装在

setTimeout

）

附言- 我的要求是在页面完全加载后，在页面上显示一个按钮