代码之家 › 专栏 › 技术社区 › flix

如何创建透明视图的加载程序?

loader react-native ios android

flix · 技术社区 · 7 年前

我想创建像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'},
});

我想打电话给你 加载程序.js 在每一个屏幕上调用一个API,但是加载程序占据了所有屏幕,

这样地:

我怎么能做 加载程序.js 像我想的那样工作?有没有办法让我的加载器像facebook加载器一样?

3 回复 | 直到 7 年前

HAK 7 年前

反应本地人的 情态动词 组件允许在封闭视图中显示视图。你想要达到的目标可以通过模态组件来实现。

请调查一下 Modal Component Docs .

user8040141 user8040141 7 年前

将此添加到 Value > 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>

Akshay Patwa 7 年前

尝试应用 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'},
});