标签: react-native-navigation

我最近从 1.24 更新到了ReactNativeControllers 2.03。我还把 RN 更新到了 0.25。我使用的fork只添加了 Podspec 文件。在整理完 RN 中的所有导入更改后，我现在对这个错误感到困惑：

（另请参阅https://github.com/wix/react-native-controllers/issues/59）

RCCManager.setRootController 被调用时使用了 3 个参数，但期望有 2 个参数。如果您自己没有更改此方法，这通常意味着您的本机代码和 JavaScript 代码的版本不同步。更新两者应该可以消除此错误。

有问题的代码：

在RCCManagerModule.m：

setRootController:(NSDictionary*)layout animationType:(NSString*)animationType globalProps:(NSDictionary*)globalProps)

并在index.js：

ControllerRegistry: {
    registerController: function (appKey, getControllerFunc) {
      _controllerRegistry[appKey] = getControllerFunc();
    },
    setRootController: function (appKey, animationType = 'none', passProps = {}) {
      var controller = _controllerRegistry[appKey];
      if (controller === undefined) return;
      var layout = controller.render();
      _validateDrawerProps(layout);
      RCCManager.setRootController(layout, animationType, passProps);
    }
  },

很明显，两者都有 3 个参数。

我已经杀死并重新启动了打包程序。我已经清理了 Xcode …

我使用带有消息传递功能的react-native-firebase通过云功能向我的应用程序传递通知，使用admin.messaging().send(message)，与这里非常相似： https: //medium.com/the-modern-development -stack/react-native-push-notifications-with-firebase-cloud-functions-74b832d45386。

当应用程序在后台时我会收到通知。现在，我正在通知正文中发送一条文本，例如“新位置已添加到地图中”。我希望能够添加某种深层链接，这样当我在通知上滑动视图（例如在 iOS 上）时，它会将我带到应用程序内的特定屏幕。如何将数据从通知传递到应用程序？

我在应用程序中使用react-native-navigation。我只能从应用程序内部找到有关深层链接的代码（https://wix.github.io/react-native-navigation/#/deep-links?id=deep-links）。

如何使用 React-Native 禁用 Android 上的物理设备后退按钮？我不想为用户启用它。

我在我的应用程序中使用反应导航 v3，我在抽屉导航器中使用堆栈导航器，单击注销时我导航到登录屏幕并清除用户存储，但是每当我再次登录时，主要组件不会调用 componentWillMount 或 componentDidMount 方法，并在其上显示先前加载的数据。这是我的代码 >

const screens = {
  login: { screen: Login },
  dashboard: { screen: Dashboard },
  patientList:{screen:StackNav},
  headerComponent:HeaderComponent
 }

  const MyDrawerNavigator = createDrawerNavigator(
     screens,
      {
       initialRouteName: 'login',
      contentComponent: Sidebar
       }
     );

    App  = createAppContainer(MyDrawerNavigator);
    export default App;

堆栈导航 ==

export default createStackNavigator({
     PatientList,
     PatientDetails
 });

登出功能 ==

  localStorageService.removeAllKeys().then((res) => {
    this.props.navigation.navigate(route, { isLogin: 'N' })
  });

我正在使用 react-native，目前开始使用 redux 并创建了一个应用程序，但是当我在模拟器上运行该应用程序时，它运行良好。然后我通过 USB 将我的手机与 android 6 连接，它也在工作。但是在 Android 8 的其他设备中它不起作用然后我将 targetSdkVersion 更改为 28 然后它也不起作用我不明白是什么问题。

以下是我的 package.json

{
  "name": "Demo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.3",
    "react-native": "^0.57.8",
    "react-native-flash-message": "^0.1.10",
    "react-native-linear-gradient": "^2.5.3",
    "react-native-modal-datetime-picker": "^6.0.0",
    "react-native-navigation": "^2.8.0",
    "react-native-tab-view": "^1.3.2",
    "react-native-vector-icons": "^6.2.0",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "24.0.0",
    "jest": "24.0.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

android/build.gradle

buildscript …

我正在使用 React 原生导航。（堆栈导航）。但是我不能在 navigationOptions 中调用函数。不工作。

import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableHighlight, AsyncStorage, Alert } from 'react-native';
import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import HandleBack from '../../HandleBack';

export default class Dashboard extends Component {
    constructor(props) {
        super(props);
    }

    static navigationOptions = ({ navigation }) => {
        return {
            title: 'Dasboard',
            headerLeft: null,
            headerRight: (
                <TouchableHighlight underlayColor='transparent' onPress={this.login.bind(this)} style={{marginRight: 10}}>
                    <Icon
                        name="power-off"
                        size={25}
                        color="white"
                    />
                </TouchableHighlight>
            )
        };
    };

    login() { …

我在当前状态为 {key:'value'} 的屏幕 A 上，我导航到屏幕 B

现在我试图再次从屏幕 B 弹出到屏幕 A，但我不想丢失屏幕 A {key:'value'} 中的当前状态

一些解决方案是将数据保存在 AsynStorage 中，并在返回屏幕 A 时检索它，但这不是一个好习惯

.pop() 这样做，但如果我需要返回额外的参数怎么办？

Navigation.pop(this.props.componentId , {
                               passProps: {
                                       data : 'current',
                                       more : 'just-example'
                                     }});

上面的代码，不起作用

有什么建议 ？

我不使用任何状态管理工具，如 Redux/Mobx ..

我正在使用 react-navigation 版本 5。我有标签导航和抽屉导航。

我正在尝试在我的标题中添加一个图标来打开/关闭抽屉：

这是我用于切换抽屉的自定义右侧标题：

const HeaderRight = ({ navigation }) => {   
    return (
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity
        onPress={ () =>{ navigation.toggleDrawer()}}>  //here is the problem
          <Image source={require('./assets/images/icons/drawer.png')}/>
        </TouchableOpacity>
      </View>
    );}

这是我的标签导航器：

const Tab = createBottomTabNavigator();
function AppTab() {
  return (
     <Tab.Navigator>         
        <Tab.Screen name="Category" component={Category} />    
        <Tab.Screen name="Home" component={Home}/>
      </Tab.Navigator>
   );}

抽屉导航：

    const Drawer = createDrawerNavigator();  
    function App() {
      return (    
          <Drawer.Navigator>
            <Drawer.Screen name="AppTab" component={AppTab} />
            <Drawer.Screen name="Notifications" component={NotificationsScreen} />
          </Drawer.Navigator>  
      );}

和我的堆栈导航器到主题混合所有：

const Stack = createStackNavigator();
  export …

我刚刚更新以响应本机导航版本 5。现在我尝试在 goBack() 调用上将数据发送回上一个屏幕。

我推动下一个视图

const onSelectCountry = item => {
    console.log(item);
};

navigation.navigate('SelectionScreen', {
        onSelect: onSelectCountry});

并在通过调用从 FlatList 选择项目后返回：

function onSelectedItem(item) {
    route.params.onSelect(item);
    navigation.goBack();
}

但是通过使用参数发送函数，我收到警告：在导航状态中发现不可序列化的值...

有人可以告诉我正确的方法吗？

堆栈导航时，mode="card" 或 mode="modal" 均不起作用。在 OnePlus 5T 和 Android Studio(Google Pixel) 中测试

在 Android 和 IOS 上，默认的 Stack Navigator 模式是“card”，但在测试时，会发生简单的导航转换。即使指定了 mode="card" 或 mode="modal" 后，导航时仍然不会显示对转换的影响。

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, Button } from 'react-native';


const First=({navigation})=>{
  return (
    <>
    <Text>First Page</Text>
    <Button title="Second Page" onPress={()=>navigation.navigate("Second")}/>
    </>);
}


const Second=()=>{
  return (
    <Text>Second Page</Text>);
}


const Stack=createStackNavigator();

const StackNavigate=()=>{
  return (
  <Stack.Navigator mode='modal'>
    <Stack.Screen name="First" component={First}/>
    <Stack.Screen name="Second" …