我试图学习反应原生。反应原生flex 50%导致错误
我有以下代码:
<View>
<View style={{flex:0.5,flexDirection="row"}}>
<Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
<Text>Picture 1</Text>
</View>
<View style={{flex:0.5,flexDirection="row"}}>
<Image source={{uri:"http://image.com/image2.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
<Text>Picture 2</Text>
</View>
<View style={{flex:0.5,flexDirection="row"}}>
<Image source={{uri:"http://image.com/image3.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
<Text>Picture 3</Text>
</View>
<View style={{flex:0.5,flexDirection="row"}}>
<Image source={{uri:"http://image.com/image4.jpg"}} style={{width:100,height:'auto'}} resizeMode={"cover"} />
<Text>Picture 4</Text>
</View>
</View>
但是这时候我运行此代码,我得到一个错误说行
<View style={{flex:0.5, flexDirection:"row"}}>
“是一个意外的标记”。
我试着用50%和“0.5”取代0.5,但那些也会导致错误。
基本上,如果这是HTML CSS的网页,我想实现的行为是:
<div>
<div style="width:50%; float:left;">
<img src="http://image.com/image1.jpg" style="width:100%; height:auto;" />
<span>Picture 1</span>
</div>
<div style="width:50%; float:left;">
<img src="http://image.com/image2.jpg" style="width:100%; height:auto;" />
<span>Picture 1</span>
</div>
<div style="width:50%; float:left;">
<img src="http://image.com/image3.jpg" style="width:100%; height:auto;" />
<span>Picture 1</span>
</div>
<div style="width:50%; float:left;">
<img src="http://image.com/image4.jpg" style="width:100%; height:auto;" />
<span>Picture 1</span>
</div>
</div>
换句话说,我只是想缩略图的两列,每个图像下方的标题。
但是'flex:0.5'不等于'50%',并且没有设置宽度,它表示0.5的2,其中2来自4个项目相加的flex值并且设置剩余空间应该如何分配在项目。你似乎寻找的是“flex-basis”,RN没有,但可以在这里找到替代品:https://stackoverflow.com/questions/35436478/react-native-substitute-for-flex-basis/43022365 – LGSon
上述修正,其中弯曲工作在RN中略有不同,并且不应该_...设置如何分配**左空间,而是_...设置空间应如何分布_ – LGSon