推荐一款高效易用的React Native加载指示器库:`react-native-loading-spinner-overlay`
React Native加载指示器库react-native-loading-spinner-overlay
提供了一个简单易用的覆盖在整个应用或特定视图上的加载指示器。以下是如何使用该库的示例代码:
首先,安装库:
npm install react-native-loading-spinner-overlay --save
或者使用yarn:
yarn add react-native-loading-spinner-overlay
接下来,在你的React Native代码中引入并使用它:
import Spinner from 'react-native-loading-spinner-overlay';
export default class MyApp extends Component {
state = {
isLoading: false
}
showSpinner = () => {
this.setState({ isLoading: true });
}
hideSpinner = () => {
this.setState({ isLoading: false });
}
render() {
return (
<View>
<Button title="Show Spinner" onPress={this.showSpinner} />
<Spinner
visible={this.state.isLoading}
textContent={"Loading..."}
textStyle={styles.spinnerTextStyle}
/>
</View>
);
}
}
const styles = StyleSheet.create({
spinnerTextStyle: {
color: '#FFF'
}
});
在上面的代码中,我们创建了一个名为MyApp
的组件,它有一个状态isLoading
来控制加载指示器的显示与隐藏。我们还定义了showSpinner
和hideSpinner
方法来设置isLoading
状态。在渲染方法中,我们添加了一个按钮,当按下时会调用showSpinner
方法,显示加载指示器。
请注意,你可能需要根据自己的需求调整样式和文本。这个库支持多种自定义选项,包括更改颜色、大小、位置和文本样式等。
评论已关闭