javascript - 如何使加载程序在 View 上居中

Question

在一个显示该页面的 View 上，我需要显示加载程序，但加载程序需要将其显示在中心。

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>)
    }
})

在 First View 内容上，我需要将加载器显示为中心如何使用 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 或其他禁用表示 position:'absolute' View 的内容 View

Answer 1

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

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

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

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);