嗨,我正在尝试在 React Native 中设计一个屏幕。如果你看到下面的截图,这里有三个视图。a) 图像 b) 出现文本的中心视图 c) 圆形视图
我想扩展中心视图宽度,使其覆盖完整的可用空间。我尝试使用 flex 属性,但无法做到。有谁知道怎么做?
<View style={{ flexDirection: "column" }}>
<View style={{ flexDirection: "row" }}>
<Icon name="user" size={30} />
<Text
style={{
textAlignVertical: "center",
marginLeft: 20
}}
>
Ajay Saini
</Text>
</View>
<Text style={{ marginLeft: 50 }}>Hello</Text>
</View>
<View style={{ flexDirection: "row", width: "100%" }}>
<Icon name="user" size={30} />
<View
style={{
flex: 1,
flexDirection: "column",
marginLeft: 20
}}
>
<Text>Williams</Text>
<Text>
{item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds
ahajkdhfjksahdf
</Text>
</View>
<View
style={{
flex: 1,
flexDirection: "row",
justifyContent: "flex-end"
}}
>
<TouchableOpacity
style={{
borderWidth: 1,
borderColor: "rgba(0,0,0,0.2)",
alignItems: "center",
justifyContent: "center",
width: 30,
height: 30,
backgroundColor: "#fff",
borderRadius: 100
}}
/>
</View>
</View>
由于您的圆形视图具有flex: 1
,它会尝试占用所有可用空间。此外,中心视图尝试做同样的事情。这会导致均匀分割可用空间,因此从圆形视图中删除 flex: 1
样式就足够了。
此外,您可以尝试将 a 添加justifyContent: 'space-between'
到最外部视图。这是简化更复杂设计的绝佳选择。
<View style={{ flexDirection: 'row' }}>
<Icon name="user" size={30} />
<View
style={{
flex: 1,
flexDirection: "column",
marginLeft: 20
}}
>
<Text>Williams</Text>
<Text>
{item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds
ahajkdhfjksahdf
</Text>
</View>
<View
style={{
flexDirection: "row",
justifyContent: "flex-end"
}}
>
<TouchableOpacity
style={{
borderWidth: 1,
borderColor: "rgba(0,0,0,0.2)",
alignItems: "center",
justifyContent: "center",
width: 30,
height: 30,
backgroundColor: "#fff",
borderRadius: 100
}}
/>
</View>
</View>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句