反应本机导航标题溢出答案

【问题标题】：React Native Navigation Header Overflow反应本机导航标题溢出
【发布时间】：2021-12-15 16:08:59
【问题描述】：

我正在尝试通过设置headerTitle: <CustomHeader /> 在react-navigation 中创建自定义标题，但自定义标题溢出屏幕。 Here is the preview on both iOS and 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"
}

它实际上是在做我打算做的事情，只是篮子图标超出了屏幕的边缘

【问题讨论】：

标签： javascript react-native flexbox

【解决方案1】：

尝试将flex: 1 添加到您的textContainer 样式中。还可以尝试为图标的视图容器指定宽度。

【讨论】：