如何使加载程序在视图上居中答案

【问题标题】：How to make loader center on the View如何使加载程序在视图上居中
【发布时间】：2015-12-26 05:12:17
【问题描述】：

在显示该页面中的页面的一个视图上，我需要显示加载器，但加载器需要将其显示在中心。

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 实现它

//新建一个

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' 视图的内容视图

【问题讨论】：

我想我会试着为你解决这个问题，但已经晚了，我也累了。但是，如果您深入研究，我认为可以在这里找到答案github.com/brentvatne/react-native-modal。还有一个组件也可能非常有用。祝你好运！
也看到这个...stackoverflow.com/questions/34459609/…
谢谢 Chris Geirman 。实际上我想为 android 和 ios 使用这个加载器制作中心，但 react-native-modal 仅适用于 ios。
明白了，我并不是建议您使用它们，而是建议您了解它们的工作原理，因为您正在尝试解决类似的问题
是的，我理解 Chris Geirman。谢谢

标签： javascript jquery reactjs react-native

【解决方案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);

【讨论】：

谢谢纳德·达比特。它适用于 IOS，但我如何才能为 android 实现相同的效果，因为在我的项目中，我对 Android 和 IOS 使用相同的代码
我想我不明白你想要完成什么。我以为您正在尝试在内容顶部创建一个以微调器为中心的叠加层。很高兴纳德支持我们:)。 ActivityIndicatorIOS 仅适用于 iOS，但这里有一个 (FaridSafi/react-native-gifted-spinner) 声称是跨平台的。还有很多其他的react.parts/native?search=spinner
正是我想在内容顶部创建一个以微调器为中心的覆盖。现在我使用 flexbox 实现了这一点，但我遇到了一个问题，当微调器加载时应该禁用覆盖内容。我用工作代码更新了上面的代码
我与 react-native-gifted-spinner 一起工作，但在添加内容时加载器出现故障，但在我的场景中，加载器始终应该居中，而加载器运行时用户无法对内容执行操作