如何在 android 的 react-navigation 标头中将图像设置为标题？答案

【问题标题】：How to set an Image as title in react-navigation header on android?如何在 android 的 react-navigation 标头中将图像设置为标题？
【发布时间】：2017-06-20 11:35:03
【问题描述】：

我想在 StackNavigator 中使用图像作为标题的标题。它在 ios 上运行良好，但无法在 Android 上运行：

    const navigationOptions = {
    header: ({navigate}) => ({
        left: (
            <TouchableOpacity
                activeOpacity={1}
                onPress={() => navigate('DrawerOpen')}>
                <Image
                    style={styles.app_drawer}
                    source={require("../assets/ic_drawer.png")}
                />
            </TouchableOpacity>
        ),
        title: (
            <Image
                style={styles.app_logo}
                source={require("../assets/ctw_logo_white.png")}/>
        ),
        style: {backgroundColor: colors.purple},
    }),
};

const Stack = {
    [strings.route_cases]: {
        name: "Cases",
        screen: Object.assign(MainScreen, {navigationOptions}),
    },
    [strings.route_case_details]: {
        name: "Case Details",
        screen: CaseDetailsScreen,
    },
};

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

试试这个,,,,

  const navigationOptions = {
        header: ({navigate}) => ({
            left: (
<View style={{flexDirection:'row'}}>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={() => navigate('DrawerOpen')}>
                    <Image
                        style={styles.app_drawer}
                        source={require("../assets/ic_drawer.png")}
                    />
                </TouchableOpacity>

               <Image
            style={styles.app_logo}
            source={require("../assets/ctw_logo_white.png")}/>
</View>
            ),
            title: null,
            style: {backgroundColor: colors.purple},
        }),
    };

    const Stack = {
        [strings.route_cases]: {
            name: "Cases",
            screen: Object.assign(MainScreen, {navigationOptions}),
        },
        [strings.route_case_details]: {
            name: "Case Details",
            screen: CaseDetailsScreen,
        },
    };

给图像留边距并调整它

【讨论】：

【解决方案2】：

图像未显示的原因是我没有为图像提供任何宽度，只要我指定了宽度（不仅仅是高度），图像就会出现在 android 上...而且我必须动态调整要在工具栏的中心准确显示的图像。

【讨论】：