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的中心微調器？

回答

相關問題