标签: react-navigation

我是本机反应的新手。我正在编写一个android应用程序。除了反应导航之外还有什么其他选项可以实现我所说的导航？另外，如果您能提供演示链接以了解如何为特定于 android 的应用程序实现导航，我将不胜感激。

On react-navigation's DrawerNavigator，有没有办法改变背景颜色？

默认情况下，配色方案如下所示：

由以下初始化：

export const Drawer = DrawerNavigator({
    dOne: {
      screen: Screen1,
    },
    dTwo: {
      screen: Screen2,
    }
  }
);

我在 React Native App 中使用 React Navigation，并为我的路由创建了一个自定义标题组件

像这样 ：

const Router = StackNavigator({
 Main: {
     screen: Main,
     navigationOptions: ({navigation}) => ({
         header:<Header title="Main"/>
     })
   },
})

当使用自定义标题组件时，本机动画不起作用我想知道如何在标题中实现与此处相同的动画https://reactnavigation.org/

如何结合使用StackNavigator和TabNavigator？

我的以下代码有效：

index.android.js：

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

import { StackNavigator,TabNavigator } from 'react-navigation';


import TestComp1 from './src/components/TestComp1'
import TestComp2 from './src/components/TestComp2'
import TestComp3 from './src/components/TestComp3'
import TestComp4 from './src/components/TestComp4'
import TestComp5 from './src/components/TestComp5'

export default class myApp extends Component {
  render() {
    return (

        <MyApp />

    );
  }
}


const MyApp = StackNavigator({
  TestComp1: {screen:TestComp1},
  TestComp2: {screen:TestComp2}
});

const Tabs = TabNavigator({
  TestComp3: {screen:TestComp3},
  TestComp4: {screen:TestComp4}
  TestComp5: {screen:TestComp5}
}); …

我正在使用react-navigation / TabNavigator，有没有办法在不使用Redux或mobx的情况下从另一个选项卡更改选项卡的状态？

我一直在尝试将回调传递到屏幕中。

这是我的实验摘录...

export default class Test extends React.Component {
    constructor(props) {
        super(props);
    };

    handleOnPress(data){
    //How do we pass this callback to "Home" or "Sub"?
    }

    render() {
        const Navigator = StackNavigator({
            Home: {screen: Home},
            Sub:  {screen: Sub}
        });
        let data = {blah:"blah blah"};

        return (<Navigator screenProps={data} />);
    }
}

在这个例子中，我可以this.props.screenProps.blah在这两个Home和Sub。我认为能够传递道具也意味着能够传递回呼，但我觉得我不对。

有没有人遇到这个问题？

任何建议将被认真考虑。

我已经使用React Navigation的createMaterialBottomTabNavigator在我的应用程序中创建底部标签导航器。我希望屏幕在选项卡更改时从左侧或右侧“向内滑动”，并在屏幕上滑动以能够更改选项卡。我已经查看了文档https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html，但找不到任何配置选项可以实现此目的。为什么是这样？

我确实有一个简单的React-native应用程序，使用react-navigation进行导航。我的问题是，即使在以下屏幕之一中，标题和标题也未显示navigationOptions：

main.js：

import React from "react";
import { View, Text } from "react-native";
import {
  createDrawerNavigator,
  createAppContainer,
  createStackNavigator
} from "react-navigation";

import ArticleList from "./screens/ArticleList";
import ArticleList2 from "./screens/ArticeList2";

import ArticleWebView from "./screens/ArticleWebView";

// create the Navigator to be used
const Stack = createStackNavigator({
  ArticleList: { screen: ArticleList },
  ArticleWebView: { screen: ArticleWebView }
});

const Drawer = createDrawerNavigator(
  {
    Stack: { screen: Stack },
    ArticleList2: { screen: ArticleList2 }
  },
  {
    initialRouteName: "Stack"
  }
);

// The …

I am developing a React native application for learning purposes. I am now implementing navigation using React Navigation. I am using stack navigation. But I cannot find a way to remove the previous screen from navigation history and kill the app.

I set up my navigation like this.

const AppStack = createStackNavigator({
  Login: {
    screen: Login
  },
  Register: {
    screen: Register
  },
  Events: {
    screen: Events
  }
});

如您在上面的代码中看到的，默认情况下，我打开登录屏幕。登录后，我将打开“事件”屏幕，如下所示。

this.props.navigation.navigate('Events');

问题是，当我进入事件页面时，可以在导航栏中看到后退按钮。当我按下它时，我被带回到登录页面。

但是我想要的是，登录后，我想从堆栈中删除登录页面。当我在活动页面上时，当我单击“后退”按钮时，应关闭该应用程序。也许它可能没有后退按钮。在这种情况下，它就像第一个屏幕一样。我怎样才能做到这一点？

我突然收到模块“ fs”无法解决的错误。但是我没有使用此模块，也没有更改任何内容。我的应用程序启动时突然返回此错误。

错误：捆绑失败：错误：无法解析模块fs从 /Path/to/Project/node_modules/handlebars/lib/index.js：模块fs 不会在急速模块地图存在

这可能与https://github.com/facebook/react-native/issues/4968有关要解决此 问题，请尝试以下操作：

1. 清除看门人手表：watchman watch-del-all。
2. 删除node_modules文件夹：rm -rf node_modules && npm install。
3. 重置Metro Bundler缓存：rm -rf /tmp/metro-bundler-cache-*或npm start -- --reset-cache。
4. 删除急速缓存：rm -rf /tmp/haste-map-react-native-packager-*。

我已经尝试了四个步骤来解决，但没有任何帮助。任何想法可能有什么问题吗？