条件 jsx 元素 React native答案

【问题标题】：Conditional jsx elements React native条件 jsx 元素 React native
【发布时间】：2021-10-25 09:56:56
【问题描述】：

我尝试在加载 webview 时显示文本，但 ActivityIndicator 没有消失。

我尝试创建一个带有布尔变量的钩子，该变量在加载 webview 时会发生变化，然后它应该显示文本“你好，我是你的猫！”第一种情况。


import React,{useState} from 'react';
import { Text, StyleSheet, View, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';


const Cat = () => {
  return (
    <Cat />
  );
}
const Cafe = () => {
  const [ok, setOk] = useState(false);
  return (
      ok ?
      
    <Text>Hello, I am your cat!</Text>
      :
    <View style={styles.container}>
      <View style={{height: 0, width: 0}}>
        <WebView
          source={{uri: "https://www.google.com/"}}
          onLoad={() => {
            setOk(true)
            console.log(ok);
          }}
        />
      </View>
      <ActivityIndicator size="large" color="#E60081"/>
    </View>
);
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default Cafe;

【问题讨论】：

对我来说，它首先显示Hello, I am your cat!。
我认为这是因为我使用的是在线编辑器。但是你能在文本之前看到活动指示器吗？
即使我在使用在线编辑器。不，我没有看到任何 Spinner。可以分享一下你的零食链接吗？
snack.expo.dev/@zentyx/your-cat

标签： javascript reactjs react-native webview jsx

【解决方案1】：

您传递了对 onLoad 函数的引用。试试下面的代码。

<WebView
  source={{uri: "https://www.google.com/"}}
  onLoad={setOk(true)}
/>

【讨论】：