我想显示和隐藏一个元素(ActivityIndicator)

Question

我想做的是，当我点击按钮时，它消失了，当它已经加载在另一个组件中时，它再次显示按钮。

JSX代码:

import { ActivityIndicator } from 'react-native';
{......}
{/button besides loading/}
<LinearGradient
colors={['#D97B29', '#F2B47E']}
style={styles.signIn}
>
<Text style={[styles.textSign, {
color:'#fff'
}]}>Entrar</Text>
{/loading besides button /}
<ActivityIndicator size="large" color="#D97B29" />
</LinearGradient>
{...}

如何使用useState来处理它?

Answer 1

如果你想隐藏/显示按钮被按下时的指示，你需要

const [ showLoader, setShowLoader ] = useState(false);

按下按钮时应该显示如下内容

<Button onPress={() => setShowLoader(!showLoader)} text="Some text" />

和你的代码应该看起来像

{showLoader && (
<ActivityIndicator size="large" color="#D97B29" />             
)}
{!showLoader && <LinearGradient
colors={['#D97B29', '#F2B47E']}
style={styles.signIn}
>
<Text style={[styles.textSign, {
color:'#fff'
}]}>Entrar</Text>
</LinearGradient> }
```

Answer 2

像这样

{state && <ActivityIndicator size="large" color="#D97B29" />}

如果statetrue它将显示组件