标签: react-native-navigation-v2

使用react-native-navigation v1,您可以设置这样的抽屉:

drawer: {
    left: {
        screen: 'ScreenName'
    }
}

在反应原生导航的文档中,他们提到仍然支持抽屉,

但没有使用它的例子.我尝试的方式和v1相同,但是没有用.是否有人以某种方式实现了它？

我正在使用来自wix的React-Native-Navigation v2(非React-Navigation).我尝试禁用默认情况下呈现的topBar.

我使用以下选项并渲染bottomTabs:

Navigation.setDefaultOptions({
  topBar: {
    visible: false,
    _height: 0,
    drawBehind: true,
  },
});

topBar消失,但在bottomTabs的Tabs的初始打开时显示drawBehind动画.

有没有办法禁用topBar？

最好的祝福

更新

我在defaultOptions中添加了animate:false并删除了_height

Navigation.setDefaultOptions({
  topBar: {
    visible: false,
    _height: 0,
    drawBehind: true,
  },
});

这对我有用,并没有显示tabchange上的动画

我已经使用 expo 一段时间了，并且在没有 expo 的情况下切换到 react-native-init。

我在没有 expo 的情况下工作很舒服（感谢 Github），但不知何故，我无法通过大量谷歌搜索找到一个解决方案，用于与 Expo 中的 AppLoading 类似的功能（https://docs.expo.io/versions/latest/sdk /应用程序加载）。也许我没有使用正确的关键字，我不断得到反应原生快速图像等的结果，这些结果只是从缓存中预加载图像。

我已经在 Xcode 中设置了启动屏幕，我想在启动屏幕切换到我的第一个屏幕之前进行网络请求，将一些数据加载到我的 redux 存储中，预加载图像和一些字体。

有人可以为我提供解决方案或解决方案的链接吗？

我的RNNv2顶部栏中有一个自定义组件“ MenuButton”。我希望单击该按钮时运行openMenu（），但这不会发生。我的打字稿掉毛告诉我Property openMenu does not exist on typeof Home。为什么是这样？

 class Home extends React.PureComponent<Props, State> {
    constructor(props: Props) {
        super(props);
        Navigation.events().bindComponent(this);
    }

    closeMenu = () => {
        this._drawer.close();
    };
    openMenu = () => {
        this._drawer.open();
    };
    static options(passProps) {
        return {
            topBar: {
                rightButtons: [
                    {
                        component: {
                            name: 'MenuButton',
                            passProps: {
                                onClick: () => this.openMenu(),
                            },
                        },
                    },
                ],
            },
        };
    }

    render() {
        return (
              ...
        );
    }
}

参考我passProps从以下网址获得了代码：https : //github.com/wix/react-native-navigation/issues/3648

反应原生导航v2问题.

我的应用程序以index.js开头,并且它也被注册到AppDelegate中.这是详细信息:

import { AppRegistry } from 'react-native'; const { start } = require('./src/app'); start();

app.js这里:

```

const { Navigation } = require('react-native-navigation');
const { registerScreens } = require('./screens');
const { Platform } = require('react-native');

if (Platform.OS === 'android') {
alert = (title) => {
    Navigation.showOverlay({
        component: {
            name: 'navigation.playground.alert',
            passProps: {
                title
            },
            options: {
                overlay: {
                    interceptTouchOutside: true
                }
            }
        }
    });
};
}

function start() {
registerScreens();
Navigation.events().registerAppLaunchedListener(() => {
    Navigation.setDefaultOptions({
        _animations: {
            startApp: {
                y: { …

我正在使用 RNN2，我需要将 Android 上的方向锁定为纵向。通常在传统的 android 应用程序中，它是通过 manifest.xml 中的 android:screenOrientation = "portrait" 完成的，但是当我使用 RNN2 设置屏幕时，它不起作用。

任何帮助将不胜感激。

我正在使用react-native-navigation和redux进行状态管理。我将每个Component注册为WrappedComponent，将其连接到redux存储。这很好用，并且与官方react-native-navigation文档中的atoami示例代码非常相似：https：//wix.github.io/react-native-navigation/#/docs/showcases

import { Provider } from "react-redux";
import store from "./config/store";
...
function WrappedComponent(Component) {
  return function inject(props) {
    const EnhancedComponent = () => (
      <Provider store={store}>
        <Component {...props} />
      </Provider>
    );

    return <EnhancedComponent />;
  };
}

export function registerScreens() {
  Navigation.registerComponent("Initializing", () =>
    WrappedComponent(InitializingScreen)
  );
  Navigation.registerComponent("SignIn", () => WrappedComponent(SignInScreen));
...
}

商店对象为：

import { createStore, compose, applyMiddleware } from "redux";
import thunk from "redux-thunk";

import reducers from "../reducers";

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default createStore( …

我有一个简单的两屏应用程序，其中包含redux和React-Native-Navigation V2。我尝试将项目从列表传递到另一个视图作为道具。不幸的是，我得到一个错误：

TypeError：无法读取未定义的属性“ id”

该项目已通过但未在第二视图中作为道具被接收。在没有Redux的情况下，一切正常。我是否正确注册了视图？

查看注册：

export default (store) =>  {
  Navigation.registerComponent('example.app.FirstScreen', reduxStoreWrapper(FirstScreen, store));
  Navigation.registerComponent('example.app.SecondScreen', reduxStoreWrapper(SecondScreen, store));
}

function reduxStoreWrapper (MyComponent, store) {
  return () => {
    return class StoreWrapper extends React.Component {
      render () {
        return (
          <Provider store={store}>
            <MyComponent />
          </Provider>
        );
      }
    };
  };
}

第一视图：

class FirstScreen extends Component {
  componentDidMount() {
    this.props.listItems();
  }

  onItemPress = (item: Item) => {
    Navigation.push(item._id, {
      component: {
        name: 'example.app.SecondScreen',
        passProps: {
          item: item
        }
      }
    });
  };

  render() { …

设置

我有 2 个屏幕，我们称它们为 A 和 B。

屏幕 A 显示由手机后置摄像头（我无法进一步访问的第三方库）记录的摄像头图像。屏幕 B 具有半透明背景和一些 UI 元素（例如按钮）

任务

我无法直接（第三方）将 UI 元素添加到屏幕 A，这就是为什么我使用react-native-navigation V2通过屏幕 A 顶部的Navigation.showOverlay覆盖屏幕 B。

问题

两个屏幕都需要对触摸事件做出反应，但似乎屏幕 B 的覆盖在屏幕 A 上阻止了这些事件。

题

是否有可能将所有触摸事件从屏幕 B（带有覆盖的 UI）传递到屏幕 A（相机屏幕，它也需要对触摸事件做出反应），以便两个屏幕都能够对用户输入做出反应？

如果有人对我正在谈论的第三方组件感兴趣：https : //github.com/brave-digital/react-native-wikitude/issues/10

我试图在react-native上向此入门项目添加一个路由器react native navigation v2，但是我遇到了与babel软件包有关的问题（可能是）。当我跑步

react-native run-android

我在Metro Bundler中遇到此错误：

加载依赖图，完成。：捆绑失败：错误：[BABEL] D：\ react-native \ projecti \ index.js：预设选项中不允许.overr ides

在Object.keys.forEach.key（D：\ react-native \ projecti \ node_modules \ metro \ node odules \ Obabel \ core \ lib \ config \ validation \ options.js：71：13）在Array.forEach（）在在实例化预设（D：\ react-native \ projecti \ node_modules \ metro \ node_modul s \ l @ babel \ core \ lib \ config \ full.js：242：36）在cachedFunction（D：\ react-native \ projecti \ node_modules \ metro \ node_modules \ babel \ core \ lib …