Question

我想创建像facebook登录这样的透明加载器，因此加载器可以堆叠视图，

像这样：

我有一个名为Loader.js的文件：

class Loader extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.nyoba}>
          <Text style={[global.global.HeaderText, {color:'white', justifyContent:'center'}]}>Loading...</Text>
          <Text style={[global.global.HeaderText, {color:'white', justifyContent:'center', marginBottom:150}]}>Please Wait...</Text>
          <Spinner
            isVisible={true}
            size={100}
            type={'ThreeBounce'}
            color={'#ffffff'}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  indicator: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 80
  },
  container: {flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0, 0.3)'},
  nyoba: {justifyContent: 'center', alignItems: 'center', backgroundColor: '#8B0000'},
});

我希望在调用API时在每个屏幕中调用Loader.js，但是Loader会占用所有屏幕，

像这样：

如何使Loader.js像我想要的那样工作？有没有办法使我的装载机像facebook装载机一样？

Answer 1

React Native的模态组件允许在封闭视图中显示视图。您尝试实现的目标可以使用Modal组件完成。

请查看Modal Component Docs。

Answer 2

尝试将StyleSheet.absoluteFillObject和zIndex: 5应用于您最常见的视图

import React from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
export class Loader extends React.Component {
render() {
    return (
        <View style={[styles.container, 
StyleSheet.absoluteFillObject]}>
            <View style={styles.nyoba}>
                <Text style={[ {color:'white', 
justifyContent:'center'}]}>Loading...</Text>
                <Text style={[ {color:'white', 
justifyContent:'center', marginBottom:0}]}>Please Wait...</Text>
                </View>
            </View>
        );
     }
   }

const styles = StyleSheet.create({
indicator: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 80
},
container: {flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0, 0.3)', zIndex: 5},
nyoba: {justifyContent: 'center', alignItems: 'center', backgroundColor: '#8B0000'},
});

Answer 3

将此添加到Value＆gt; styles

   <!--   My Chose Diaog   -->
    <style name="Theme.CustomDialog" parent="Base.Theme.AppCompat.Light.Dialog">
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:padding">0.1dp</item>
        <item name="android:background">#8d8cdf</item>

将其添加到AndroidManifest文件

<activity
      android:name=".Add_Posts_Buttons"
      android:theme="@style/Theme.CustomDialog" />

您可以通过在样式中设置此颜色的透明度来调整透明度示例：

<!--Transparent 50%-->
    <item name="android:background">#45ffffff</item>

    <!--Transparent 10%-->
        <item name="android:background">#8d8cdf</item>

    <!--Transparent 0%-->
        <item name="android:background">#ffffff</item>

    <!--Transparent 100%-->
        <item name="android:background">#00ffffff</item>

React Native - 如何使用透明视图创建Loader？

3 个答案: