我有 2 個視圖左側的一個視圖有 2 個彼此相鄰的專案,另一個像這樣在右側,而在 IOS 上情況更糟

您在這里看到的問題名稱與箭頭不對齊,我無法弄清楚原因是什么。這是我的代碼:
<View style={styles.header}>
<View style={styles.leftHeader}>
<TouchableOpacity onPress={() => navigation.goBack()}>
<ArrowLeft />
</TouchableOpacity>
<View>
<Text style={styles.username}>{user && user.username}</Text>
</View>
<TouchableOpacity
onPress={() => setMoreModalVisible(true)}
style={styles.twoDots}>
<TwoDots />
</TouchableOpacity>
</View>
這是樣式:
header: {
paddingHorizontal: wp(3),
flexDirection: 'row',
marginTop: hp(2.5),
marginBottom: hp(1),
justifyContent: 'space-between',
alignItems: 'center',
},
leftHeader: {
flexDirection: 'row',
justifyContent: 'flex-start',
textAlignVertical: 'center',
},
username: {
fontFamily: semiBoldFont,
fontSize: 15,
paddingLeft: wp(3),
},
uj5u.com熱心網友回復:
檢查<ArrowLeft />組件的樣式。那里可能應用了一些填充或邊距。
或者為我們提供一些代碼小吃,以便我們能夠為您提供幫助。
uj5u.com熱心網友回復:
您無法更改標題的高度,因為headerStyle道具沒有height道具。您可以按照此鏈接上的檔案參考:https :
//reactnavigation.org/docs/headers#adjusting-header-styles
另一種修改標題樣式的方法,您可以將headerShown道具設定為false并在組件中構建您自己的標題,您可以在其中定義view自定義標題的高度,但要小心,因為如果您打開標題,react-navigation則必須使用safeareaviewfromreact-native-safe-area-context因為你的螢屏會滑起來。在 Android 上,您不必關心這一點。
示例的一些代碼片段:
<Stack.Screen
name="example"
component={Component}
options={{headerShown: false}}
/>
function Component() {
const headerHeight = Platform.OS === 'ios' ? 44 : 20
return (
<SafeAreaView edges={["top"]}>
<View style={{height: headerHeight}}>
// your custom header content
</View>
</SafeAreaView>
)
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/348743.html
標籤:反应原生
