我正在嘗試在我的反應原生應用程式中設定兩個需要出現在同一行的元素。到目前為止，我將它們定位在同一行 - 使用嵌套<Text>元素 - 但我不清楚如何能夠在它們之間創建一些距離。例如，在下面的示例中，我希望圖示左對齊，現在就是這樣，但我希望this.props.client.name文本居中對齊。據我了解，邊距在子元素中被忽略。我怎樣才能做到這一點？
<View>
<Text>
<Feather name="chevron-left" size={24}
onPress={() => props.navigation.goBack()}
/>
<Text>{this.props.client.name}</Text>
</Text>
</ View>
uj5u.com熱心網友回復：
您可以嘗試使用“flex”css 屬性設定它們的樣式。
例如，如果您有：
<View>
<Text>
<Feather name="chevron-left" size={24}
onPress={() => props.navigation.goBack()}
/>
<Text>{this.props.client.name}</Text>
</Text>
</ View>
嘗試
<View>
<Text>
<View style={{ display: "flex", alignItems: "center",
position: "relative", zIndex: 1 }}>
<Feather name="chevron-left" size={24}
onPress={() => props.navigation.goBack()}
style={{position: "absolute", zIndex: 2, left: 0 }}
/>
<Text>{this.props.client.name}</Text>
</View>
</Text>
</ View>
您現在應該將圖示放在左側，文本居中。
在此處閱讀有關 Flexbox 的更多資訊。reactnative.dev/docs/flexbox
uj5u.com熱心網友回復：
我建議你洗掉你Text的包裝你的元素。
然后View你可以通過設定來改變風格，flexDirection因為row默認是column在 React Native 中。并且加上justifyContent值space-between來定位元素的左右位置。
也許不確定是否需要flex具有價值1。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/525056.html
標籤：反应式