React Native - Как создать загрузчик с прозрачным представлением? - PullRequest
Новая
       14

React Native - Как создать загрузчик с прозрачным представлением?

0 голосов
/ 24 мая 2018

Я хочу создать прозрачный загрузчик, такой как логин на Facebook, чтобы загрузчик мог составлять представление,

, как этот:

enter image description here

У меня есть файл с именем 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'},
});

И я хочу вызывать Loader.js на каждом экране при вызове API, но загрузчик принимает весь экран,

вот так:

wreid

Как заставить Loader.js работать так, как я хочу?Есть ли способ сделать мой загрузчик похожим на загрузчик Facebook?

Ответы [ 3 ]

0 голосов
/ 24 мая 2018

Попробуйте применить 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'},
});
0 голосов
/ 24 мая 2018

Добавить в 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>
0 голосов
/ 24 мая 2018

Компонент React Native's Modal позволяет представить представление во вложенном представлении.То, чего вы пытаетесь достичь, можно сделать с помощью модального компонента

Пожалуйста, ознакомьтесь с Документами для модальных компонентов .

...