如何在视图上使装载机居中 [英] How to make loader center on the View

问题描述

在显示该页面中页面的一个视图上，我需要显示加载程序，但是加载程序需要在中心显示它.

On one View displaying the page in that page I need to display the loader but the loader need to display it on center.

var LoaderPositionCenter = React.createClass({
    render:function(){
       return(<View  style=   {{backgroundColor:'blue',flex:1,justifyContent:'center',alignItems:'center'}>
                <View>
                   <Text>one</Text>
                   <Text>one</Text>
                   <Text>one</Text>
                   <Text>one</Text>
                   <Text>one</Text>
                   <Text>one</Text>
                   <Text>one</Text>
                   <Text>one</Text>
              </View>
    <View style={{flex:1,justifyContent:'center',alignItems:'center',flexDirection:'row'}}>
        <Text style={{textAlign:'center',color:'yellow'}}>
           textsds dsdsdsd
        </Text>
    </View>       
   </View>)
    }
})

在初次查看"内容上，我需要向加载者展示如何使用flexbox使其成为中心

On First View content i need to show the loader as center how can make it using flexbox

//新的一个

var Example = React.createClass({
        getInitialState:function(){
            return {status:"button"}
        },
      click:function(){
          this.setState({status:"buttonText"});
      },
      render() {
        return (
          <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            position:'relative',
          }}>
              <View style={{//content view
                 position:'absolute',
                 top:0,
                 left:0,
                 right:0,
                 bottom:0,
              }}>
                  <ScrollView>
                     {
                     <TouchableHighlight 
                         underlayColor="#ffa456" 
                         onPress={this.click}
                      >
                        <Text>{this.state.status}</Text>
                      </TouchableHighlight>
                      }
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                       <Text>one</Text>
                       <Text>one</Text>
                       <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                  </ScrollView>
              </View>
              <View style={{
                    flex:1,
                    alignItems:'center',
                    justifyContent:'center'
              }}>
                 <Image source={{uri:icons.loader}}
                    style=  {styles.loader}/>
               </View>
          </View>
        );
      }
    });

如何使用flexbox或其他功能禁用表示位置:绝对"视图的内容视图

How to disable the content view that means position:'absolute' view using flexbox or other

推荐答案

您可以将外部容器设置为具有以下样式属性:

You can set the outer container to have a style property of:

flex: 1,
alignItems: 'center', 
justifyContent: 'center'

我已经在此处建立了一个完整的项目，并在下面粘贴了整个代码:

I've set up a full project here, and pasted the entire code below:

https://rnplay.org/apps/Lq4G9w

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ActivityIndicatorIOS
} = React;

var SampleApp = React.createClass({

  getInitialState: function(){
    return {
        animating: true
    }
  },

  render: function() {
    return (
      <View style={styles.container}>
       <ActivityIndicatorIOS animating={this.state.animating} style={[{height: 80}]} size="large" />
      </View>
    );
  }

});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center', 
    justifyContent: 'center',
    backgroundColor: '#ddd'
  },
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

这篇关于如何在视图上使装载机居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！