【问题标题】:React native back button missing icon反应本机后退按钮缺少图标
【发布时间】:2018-07-26 13:44:57
【问题描述】:

我正在使用 react-navigation 组件为现有的移动应用开发一个 react native 模块:

import { StackNavigator } from 'react-navigation';
....

const App = StackNavigator({
    Main: {
        screen: Main,
        navigationOptions: {
            headerBackTitle: null,
        }
    },
    Details: {
        screen: Details,
        navigationOptions: {
           headerBackTitle: null,
        }
    }

});

在主索引中,我呈现了一个简单的按钮,点击后执行以下操作:

render() {

        const navigation = this.props.navigation;

        return (
            <View>
                <Button
                    title="Go to details"
                    onPress={() => { navigation.navigate("Details") }}
                />
            </View>
        );
    }

就是这样。

问题是导航返回按钮不可见(见图):

这发生在这些操作之后:

  • 在 android 项目中复制包。

    react-native bundle --platform android \
    --dev false --entry-file index.js 
    --bundle-output ../MyApp/app/src/main/assets/index.android.bundle \
    --assets-dest ../MyApp/app/src/main/  
    
  • 从 Android Studio 启动应用

有什么建议吗?

【问题讨论】:

  • 所以它有效但不可见?可能是默认情况下它是白色的,背景也是如此。尝试使用headerStyle: { backgroundColor: 'black', }, 更改背景颜色,或使用&lt;Button color={'black'} /&gt; 更改按钮颜色

标签: javascript android ios react-native react-navigation


【解决方案1】:
navigationOptions: ({ navigation }) => ({
      headerLeft: drawerButton(navigation)
})

const drawerButton = navigation => (
    <TouchableOpacity onPress={() => navigation.navigate("DrawerToggle")}>
        <Image source={Your.image} style={Your.Style} />
    </TouchableOpacity>
);

使用此代码!

【讨论】:

  • 很好,但是如果我想渲染默认的 iOS headerLeft 怎么办?
  • 你不能
  • @LucaDavanzo 如果您仍然感兴趣,请使用来自react-navigation-stackheaderBackButton
猜你喜欢
  • 1970-01-01
  • 2019-05-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-04-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多