反應原生flexDirection錯誤？

我只是瞪着天生的反應和周圍的戲劇。所以我剛剛嘗試了flexDirection風格。反應原生flexDirection錯誤？

因此我從facebook-react中拷貝了這個例子，它看起來不錯。

代碼我testet並在我的iPhone（世博APP）相同的外觀和webside在世博園應用

enter code here 
    <View style={{ 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'flex-end', 
    }}> 
    <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> 
    <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> 
    <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> 
    </View>

爲flexDirection: 'row'。但是，如果我有機會到column我的屏幕只是白色（視圖元素消失？）。我tryed接下來的事情是設置justifyContent: 'center'我這樣做是它看起來像圖片我追加，超級wird，如果你在Facebook頁面應該OBV居中測試後...

那麼這是一個錯誤？那裏有什麼錯誤？

這是孔的東西...：

export default class App extends React.Component { 
 
    render() { 
 
    return (
 
     <NativeRouter> 
 
     <View> 
 
      <Route exact path='/'> 
 
       <View style={{ 
 
        flex: 1, 
 
        flexDirection: 'column', 
 
        justifyContent: 'center' 
 
       }}> 
 
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> 
 
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> 
 
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> 
 
       </View> 
 
      </Route> 
 
     </View> 
 
     </NativeRouter> 
 
    ); 
 
    } 
 
}

來源

2017-10-16 Zero Soul Eater

我認爲，如果你刪除第一個視圖標籤，它會正常工作。我在React本地網站上測試過。發生這種情況是因爲您的第一個視圖不適合您的所有屏幕。您可以重新調整第一個視圖標記，或者爲其設置柔性。

您也可以檢查路線。

export default class App extends React.Component { 
 
    render() { 
 
    return (
 
     <NativeRouter> 
 
     <View style={{ 
 
      flex: 1 
 
     }}> 
 
      <Route exact path='/'> 
 
       <View style={{ 
 
        flex: 1, 
 
        flexDirection: 'column', 
 
        justifyContent: 'center' 
 
       }}> 
 
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> 
 
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> 
 
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> 
 
       </View> 
 
      </Route> 
 
     </View> 
 
     </NativeRouter> 
 
    ); 
 
    } 
 
}

來源

2017-10-16 10:18:31

林新的反應原生，所以謝謝你非常糊狀爲你幫助:) –

我通常有這樣的問題，你可能要在父視圖中添加flex:1所以它會充滿了畫面，然後彎曲，方向應該是正確的。

來源

2017-10-16 20:07:52

反應原生flexDirection錯誤？

回答

相關問題