反應本機導航標題溢出

Question

我試圖通過設置headerTitle: <CustomHeader />在react-navigation創建自定義標題，但自定義標題溢出屏幕。 這是 iOS 和 Android 上的預覽

這是我的標記：

<View style={styles.container}>
    <View style={styles.textContainer}>
        <Text style={styles.description}>Welcome to</Text>
        <Text style={styles.title}>Testing</Text>
    </View>
    <View>
        <Icon name="basket" color={globalStyles.colors.PRIMARY} size={24} />
    </View>
</View>

這是我的風格

container: {
    height: "100%",
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
},
textContainer: {
    height: "100%",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "center"
},
basketContainer: {
    height: "100%",
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start"
}

它實際上在做我想做的事，只是籃子圖標越過了屏幕邊緣

Answer 1

嘗試將flex: 1添加到您的textContainer樣式。 還嘗試為圖標的視圖容器指定寬度。