标签: react-navigation

我正在尝试将道具传递给已通过调用create...Navigator调用包裹的组件,即

// Search.js
const Navigator = createMaterialTopTabNavigator({
    Wines,
    Stores,
    Vineyards,
    Restaurants
});

// Somewhere in render()...
<Navigator />

我试图找出如何将参数传递到Wines/ Stores从/等的部件.Search组分(上文).我已经阅读了文档,显然这可以navigation.navigate通过传入一个对象轻松完成,但我不知道如何使用这个特定的方法.有人可以帮忙吗？

我正在使用react-navigation并且有一个带有 ParentScreen和ChildScreen的StackNavigator.

两个屏幕都具有相同的导航栏,其动态值来自redux.像问题#313中描述的那样实现

这按预期工作.当我在DetailScreen中并更新count变量的值时,它还会更新导航栏中的值.

问题是,如果我回到父场景,导航栏中仍然存在旧值.它不会更新到redux存储中的当前值.

儿童

家长(当我回去时)

ChildScreen

class ChildScreen extends Component {
  static navigationOptions = {
    title: ({ state }) => `Total: ${state.params && state.params.count ?  state.params.count : ''}`
  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.count != this.props.count) {
      this.props.navigation.setParams({ count: nextProps.count });
    }
  }

  render() {
    return (
      <View>
        <Button onPress={() => this.props.increment()} title="Increment" />
      </View>
    );
  }
}

ParentScreen

class ParentScreen extends Component {
  static navigationOptions = {
  title: ({ state …

我在React Native应用程序中使用React Navigation,我想将标题的backgroundColor更改为渐变,我发现有一个节点模块:react-native-linear-gradient来实现反应原生的渐变

我有这样的Root StackNavigator:

const Router = StackNavigator({

Login: {
    screen: Login,
    navigationOptions: ({navigation}) => ({
       headerTitle: <Text>SomeTitle</Text>
       headerLeft: <SearchAndAgent />,
       headerRight: <TouchableOpacity
        onPress={() => { null }
    </TouchableOpacity>,
    headerStyle: { backgroundColor: '#005D97' },
    }),
},
});

我可以将Text或View包装为渐变:

<LinearGradient colors={['#3076A7', '#19398A']}><Text style={styles.title}>{title}</Text></LinearGradient>,

如何在navigationOptions中包装标题背景以使用LinearGradient模块？

我知道我可以创建一个自定义标题组件并使用它,但是当我这样做时,React Navigation的所有本机导航动画都不像两个Routes之间的Title Animation那样工作,所以它没有帮助我.

谢谢你的帮助!

我使用React Native官方文档设置了React-Native应用程序.但是,Module JSTimersExecution is not a registered callable module当我从iphone中的Expo应用程序查看应用程序时,我一直收到此错误消息.调用堆栈附在此处.

我做了一些谷歌,但没有找到任何帮助.

以前有人能得到这个错误吗？

我是初学者,反应原生,所以可能我的问题似乎对所有专家都很愚蠢.

但我正在努力实现我想要实现的基本功能,我想用启动画面启动我的应用程序,几秒钟后我想显示登录屏幕或主屏幕.

我检查了一些示例,但没有找到任何完整代码的示例,所以不知道如何在我的应用程序中使用这些代码片段.

我试图按照文档应用一些代码,但我的代码给出了错误,请看看并帮助我.

以下是我的代码:

Index.android.js

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */

    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      Navigator
    } from 'react-native';
    import Splash from './Splash';
    import Login from './Login';

    export default class DigitalReceipt extends Component {
      render() {
        return (
           {
            if (route.sceneConfig) {
              return route.sceneConfig;
            }
            return Navigator.SceneConfigs.FloatFromRight;
          }} />
        );
      }
      renderScene(route, navigator) {
        var routeId = route.id;
        if (routeId === 'Splash') {
          return ( …

我试图隐藏在抽屉导航器中按下我的一个路线的能力，因为它是另一个导航器和应用程序中的默认位置。我希望抽屉仅用于导航到不适合其他地方的用户流程的无关路线。在 React Navigation 5 之前，我可以通过简单地设置drawerLabel: () => null. 但是现在有了变化，我无法弄清楚如何以相同的方式隐藏它。

以下是我当前的导航器代码：

const DrawerNavigator = () => {
    const dispatch = useDispatch();
    return (
    <MainDrawerNavigator.Navigator 
        drawerContent={props => customDrawerContent(props, dispatch)}
        drawerStyle={drawerStyle}
    >
        <MainDrawerNavigator.Screen 
            name="DrawerNav"
            component={MainTabNavigator}
            options={{
                drawerLabel: () => null,
                title: null,
                drawerIcon: () => null
            }}
        />

        <MainDrawerNavigator.Screen
            name="FAQNav"
            component={FAQStackNavigator}
            options={
                { 
                    drawerLabel: "FAQ", 
                    drawerIcon: ({tintColor}) => <EvilIcons name={'question'} size={30} color={tintColor} />
                }
            }
        />
    </MainDrawerNavigator.Navigator>
    )
}

const customDrawerContent = (props, dispatch) => {
    console.log(props.descriptors)
    return (
        <View style={{flex: …

我正在寻找创建一个堆栈导航器，可以处理两个屏幕之间的动画特定元素。Fluid Transitions看起来像一个我可以使用的库，但它不支持react-navigation5.X。如果有一个包具有用于 react-navigation v5 的此功能，那就太好了。

但是，如果 v5 没有当前包，我想扩展StackNavigator以处理这种功能。我已经能够StackNavigator使用类似于以下内容的内容删除 的默认动画（道具中的transitionbool 在哪里为：optionsStack.Screen

const CustomTransitionStackNavigator = ({
  initialRouteName,
  children,
  screenOptions,
  ...rest
}) => {
  if (descriptors[state.routes[state.index].key].options.transition) {
    return (
      <View style={{ flex: 1 }}>
        {descriptors[state.routes[state.index].key].render()}
      </View>
    );
  }

  return (
    <StackView
      {...rest}
      descriptors={descriptors}
      navigation={navigation}
      state={state}
    />
  );
};

我希望能够使用Context（或其他一些方法）将过渡进度传递给场景的后代以处理动画。有没有办法在 v5 中获得过渡进度？或者这CustomTransitionStackNavigator是否需要管理该状态？谢谢！

undefined 无法@react-navigation/native从App.js以下位置解析模块：在项目中找不到 @react-navigation/native。

如果您确定该模块存在，请尝试以下步骤：

 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
- node_modules\react-native\Libraries\Utilities\HMRClient.js:307:41 in showCompileError
- node_modules\react-native\Libraries\Utilities\HMRClient.js:228:26 in client.on$argument_1
- node_modules\eventemitter3\index.js:181:39 in emit
- node_modules\metro\src\lib\bundle-modules\WebSocketHMRClient.js:80:20 in _ws.onmessage
- node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\WebSocket\WebSocket.js:232:27 in _eventEmitter.addListener$argument_1
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 …

我有一个似乎很常见的问题，但我还没有找到解决方案。我正在使用react-navigation、react-native-screens和react-native-image-picker。最后一个插件允许应用程序拍照并从图库加载照片。它在大多数情况下都有效，但有时在拍照并返回应用程序后会崩溃。我在他们的 GitHub 上搜索了解决方案，有很多关于此崩溃的报告，但没有一个修复。另一个库react-native-image-crop-picker也报告了这个崩溃，所以这似乎不是插件的问题，而是Android的问题。

这是我从 Firebase 崩溃日志中得到的信息：

• 无法启动活动 ComponentInfo{com.myApp/com.myApp.MainActivity}：androidx.fragment.app.Fragment$InstantiationException：无法实例化片段 com.swmansion.rnscreens.ScreenStackFragment
• 无法实例化片段 com.swmansion.rnscreens.ScreenStackFragment
• 屏幕碎片永远不应该被恢复。按照https://github.com/software-mansion/react-native-screens/issues/17#issuecomment-424704067中的说明 正确配置您的主要活动。

这似乎与 Android 在需要更多内存时杀死后台应用程序的方式有关。最后一个错误有一个指向 Github 问题的链接。他们建议修改MainActivity.java -> onCreate()，并更改super.onCreate(savedInstanceState); 到super.onCreate(null); 。然而，这并不能解决任何问题，它只是使应用程序重新启动而不是崩溃，但我仍然丢失了整个导航堆栈和我刚刚拍摄的照片。这个问题有适当的解决办法吗？

我正在尝试创建我的第一个 React Native 应用程序。我有一个登录屏幕，如果用户想要注册，我想从该屏幕导航到注册屏幕。

为了实现这一目标，我正在考虑在第一个屏幕（登录）上方打开一个模式。我创建了以下内容：

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
const Stack = createStackNavigator();

function RegisterScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>Register Screen</Text>
      <Button onPress={() => navigation.goBack()} title="Go back" />
    </View>
  );
}

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Group>
        <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
      </Stack.Group>
      <Stack.Group screenOptions={{ presentation: "modal", headerShown: false }} options={{modalPresentationStyle: 'fullScreen'}}>
        <Stack.Screen name="Register" …