反應本地，孩子的寬度百分比

這是我的代碼。我希望產品視圖佔用其父項的90％寬度。但是，下面的設置不起作用。反應本地，孩子的寬度百分比

...任何想法如何實現它，而無需使用尺寸？

return (
     <LazyloadScrollView 
      style={styles.container} 
      contentContainerStyle={styles.content} 
      name="scrollImage" > 
      {list.map((product, i) => <View key={i} style={styles.product}> 
      <LazyloadImage 
       host="scrollImage" 
       style={styles.image} 
       source={image} 
       animation={false}> 
       <View style={styles.id}> 
       <Text style={styles.idText}>{product.id}</Text> 
       </View> 
      </LazyloadImage> 
      </View>) 
      } 
     </LazyloadScrollView> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#ffffff' 
    }, 
    content: { 
    paddingTop: 20, 
    justifyContent: 'center', 
    alignItems: 'center', 
     backgroundColor: '#eee' 
    }, 
    product: { 
     flex: 0.9, 
     marginTop: 5, 
     flexDirection: 'row', 
     alignItems: 'center', 
     backgroundColor: '#FFFFFF' 
    },

來源

2016-10-03 Hammer

不知道'LazyLoadImage'但'Image'必須指定'寬度：null'和'高度：null'如果你想使用'flex' – FuzzyTree

實際上我希望爲其父級的80％寬度，而不是圖像 – Hammer

爲什麼不使用Dimensions？它將使您的應用程序具有響應能力。

如果你不想使用尺寸，嘗試在容器一些樣式設置和它的孩子，例如，使全寬與填充

container: { 
    backgroundColor: '#ffffff', 
    alignSelf: 'stretch', 
    padding: 30 
    }

我不知道是否可行，因爲你將不得不張貼其餘的代碼來測試它，但繼續玩風格和flex屬性，直到你使它工作，不應該花很長時間。

順便說一句，總是好的重溫official layout props docs from react native

而且css tricks guide to flexbox

來源

2016-10-04 07:32:10 octohedron

工作起來就像一個魅力 – Hammer

反應本地，孩子的寬度百分比

回答

相關問題