标签: wix-react-native-navigation

{
  "name": "RNNProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.1",
    "react-native-navigation": "^2.15.0"
  },
  "devDependencies": {
    "@babel/core": "7.4.0",
    "@babel/runtime": "7.4.2",
    "babel-jest": "24.5.0",
    "jest": "24.5.0",
    "metro-react-native-babel-preset": "0.53.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

graddle-wrapper.properties
distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

Build Graddle
 dependencies {
        classpath 'com.android.tools.build:gradle:3.0.1' }

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

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

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

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

我指的是官方文档的这个页面:https://wix.github.io/react-native-navigation/#/screen-api？ id = listen-to -visibility-events- globally

在我创建这个类后,我如何告诉导航器使用它？

我正在使用来自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上的动画

在使用两个不同的导航器从一个屏幕转换到另一个屏幕时，我遇到了这种情况： ex-navigation 和新的 React Navigation 。有白色闪烁一秒钟（或半秒钟）。在寻找解决方案时，我发现其他导航器也有同样的问题。例如来自 wix HERE的导航器 。从链接：

好的，问题是，React 样式在导航开始后应用，默认情况下 backgroundColor 是白色，所以这是闪烁效果..

有人有同样的问题吗？

反应原生导航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: { …

我曾经在Wix中为我的应用程序导航做出反应原生导航.但它不能正常工作.通过我的应用程序验证用户成功导航到主屏幕,但问题是当我按下Android后退按钮时,它将再次导航到登录屏幕.我需要避免这种情况.我该怎么做？最后试图完全退出应用程序.但它也不能正常工作.我尝试了一些解决方案,但这些解决方案对我没用.在这里,我附上了一些我尝试过的解决方案.

试试01:

componentWillUnmount() {
    if (Platform.OS === 'android') return
    BackHandler.removeEventListener('hardwareBackPress')
  }

  componentWillMount() {
    Alert.alert(
      "Warning!",
      "one")
    if (Platform.OS === 'android' && this.props.login)
      BackHandler.addEventListener('hardwareBackPress', () => {
        Alert.alert(
          "Warning!",
          "two")
        return true
      })
  }

尝试01:此功能正常工作,但这不能解决问题.

试试02:

constructor(props) {
super(props);
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}

onNavigatorEvent(event) {
    switch (event.id) {
        case "willAppear":
            this.backHandler = BackHandler.addEventListener(
            "hardwareBackPress",
            this.handleBackPress,
            Alert.alert(
                event.id,
                "willAppear")
            );
            break;
        case "willDisappear":
            this.backPressed = 0;
            Alert.alert(
              "Warning!",
              "willDisappear")
            this.backHandler.remove();
            break;
          default:
            break;
        }
    }

handleBackPress …

我正在使用wix反应原生导航,它在添加redux之前有效.

Navigation.registerComponent('navigation.playground.WelcomeScreen', () => 
AuthScreen);
Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      component: {
      name: "navigation.playground.WelcomeScreen"
      }
    }
  });
});

当我添加redux时,

const store=configureStore()
Navigation.registerComponent('navigation.playground.WelcomeScreen', () => 
AuthScreen,store,Provider);
Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      component: {
      name: "navigation.playground.WelcomeScreen"
      }
    }
   });
 });

我收到错误对象不是一个函数(评估'concreteComponentProvider()')

我正在使用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() { …