RN：使用flexbox的中心微调器？

我想获得作为微调垂直和水平（ios和android - 目前在ios上测试）。这里是我的JSXRN：使用flexbox的中心微调器？

  <View> 
       <Spinner/> 
      </View>

当然

，微调是一个自定义组件，它仅仅是这个包含ActivityIndicator

const Spinner = ({size}) => { 
    return (
     <View style={styles.spinnerStyle}> 
      <ActivityIndicator/> 
     </View> 

    ); 
}; 


const styles = { 
    spinnerStyle: { 
     flex: 1, 
     justifyContent : 'center', 
     alignItems: 'center' 
    } 
} 
export {Spinner}

的微调工作，但它总是在屏幕的顶部，微调器包含一个视图和我认为应该工作的弹性项目。但事实并非如此

我也尝试添加保存自定义组件即第一种观点的一些风格..

  <View style={....}> 
       <Spinner/> 
      </View>

，但没有喜悦。

任何人都可以帮忙吗？

来源

2017-04-16 Martin

如果您在其父母上添加了一个边框，并且该边框应该居中，那么您很快就会看到它是否为预期的高度......因为它听起来并不如此。高度是以百分比还是？ – LGSon

另外，你使用flex-direction列还是row？ – LGSon

flexDirection，没有改变，所以默认是列，但也尝试过 – Martin

我觉得你快到了！唯一缺少的是在<Spinner />组件周围设置flex: 1为<View>。

我确实在Expo's Sketch上创建了一个示例。随意看看它。尝试删除flex: 1并添加背景颜色以查看其行为。希望能帮助到你！

import React, { Component } from 'react'; 
import { View, StyleSheet, ActivityIndicator } from 'react-native'; 

const spinnerStyles = StyleSheet.create({ 
    spinnerStyle: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    }, 
}); 

class Spinner extends Component { 
    render() { 
    return (
     <View style={spinnerStyles.spinnerStyle}> 
     <ActivityIndicator size="small" /> 
     </View> 
    ); 
    } 
} 

export default class App extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Spinner /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    // backgroundColor: '#4286f4', 
    }, 
});

来源

2017-04-16 22:43:55 manosim

RN：使用flexbox的中心微调器？

回答

相关问题