标签: react-native-navigation

注意：请务必对我应该提及的内容进行评论以改进这个问题，而不是不赞成，我能够成功地为另一个项目设置带有 expo 的 React Navigation，并且很想在这个项目中启动和运行 RNN。

我正在为我的 React Native 应用程序设置 React Native Navigation，特别是使用 Xcode 的 iOS。

我已AppDelegate.m按照说明更改了文件：

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <ReactNativeNavigation/ReactNativeNavigation.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];

  return YES;
}

@end

进行更改后，我收到两个 Xcode 错误：

'ReactNativeNavigation/ReactNativeNavigation.h' file not found
Use of undeclared identifier 'ReactNativeNavigation'

我已确保遵循所有步骤，错误发生在React Native Navigation iOS 文档的第 3 步

我已经集成了 React Native 导航包。我想在我的 topBar rightButton 上添加带有动态值的徽章。包的 Github 链接：：https : //github.com/wix/react-native-navigation

我想要这样的输出。您可以查看此屏幕截图::

问题：：

如果我在通知图标上添加计数值，那么当我尝试单击按钮时不会发生任何事件。单击此按钮后，我想打开通知屏幕。

代码：

static options({ menuIcon }) {
        return {
            topBar: {
                title: {
                    fontFamily: font,
                    fontSize: fontSize.heading,
                    color: colors.white,
                    alignment: 'center',
                    text: strings.dashboard
                },
                alignment: 'center',
                elevation: 0,
                noBorder: true,
                background: {
                    color: colors.dark
                },
                leftButtons: [
                    {
                        id: 'openSideMenu',
                        icon: menuIcon ? menuIcon : APIURLServiceSingleton.getInstance()._menuIcon
                    }
                ],
                rightButtons: [
                    {
                        id: 'notificationButton',
                        component: {
                            name: 'component.notificationButton'
                        }
                    }
                ]
            }
        }
    }

我的自定义组件的代码::

<TouchableOpacity
    onPress={() …

如何使用 React Native 中的 react-navigation 在 Android 中使用向下滚动操作自动隐藏标题并使用向上滚动操作显示标题？

    const HomeStack = createStackNavigator({

      Home: {
        screen: HomeIndexScreen,
      },
      Details: {
        screen: HomeItemScreen,
      }
    },{
      headerLayoutPreset : 'center',
      headerMode: 'float'
    });

I am using React Native and React Native Navigation to build out my application. Currently, I have three bottom tabs: Home, Upload Video and Messages. Upon selection of the Upload Video tab, I want to render the Upload Video component and hide the bottom tabs on just that screen, and display a header with 'Cancel' (takes them back to the HomeView) and 'Post' buttons (this has already been done). I've had an extremely difficult time hiding the tab bar on …

请尝试帮助我！我需要在 android 和 ios 视图上从我的文件夹“project/assest/images/test.svg”渲染 svg 图像。

我试过了 ：

解决方案1： <Image source={imagePath}></Image>

解决方案2：

import SvgUri from 'react-native-svg-uri';
 <View>
    <SvgUri
      width="200"
      height="200"
      source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
    />
  </View>

解决方案 3：首先，我应该将 svg 文件转换为 png、jpeg，然后渲染简单的图像，但这种方式非常奇怪

请帮忙，我在这方面做错了什么。

如何删除反应导航顶部栏中选项卡之间的空白。所以应该发生的是选项卡大小应该根据屏幕大小进行调整。

这就是我的导航目​​前的样子。

您可以看到选项卡非常大。它们占用了太多空间。我怎样才能获得这些空白，以便选项卡只占用足够的大小来适合选项卡名称。

我尝试过造型Tab.Navigator但没有成功。例如，我尝试过以下操作：

<Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        scrollEnabled: true,
        labelStyle: { padding: 0, margin: 0, border: 0 },
        tabStyle: { padding: 0, margin: 0, border: 0 },
      }}
      lazy={true}
      style={{ padding: 0, margin: 0, border: 0 }}
    >

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

import Home from "../screens/Home";

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const HomeTabNavigation = () => {
  return (
    <Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        scrollEnabled: …

我有一个道具，当我更新状态时它会改变。将数据传递到屏幕时如何更新初始参数？

props.authMsg已更新，但初始参数未更新

<Stack.Screen initialParams={{authMsg: props.authMsg}} name="Login" component={Login} />

参数值保持不变。

<Text>{props.route.params.authMsg}</Text>

我有一个bottomTabNavigator，它有两个stacknavigator。每个 stacknavigator 都有自己各自的屏幕。每当我使用类似的东西

navigator.navigate("Stackname" {screen:"screenname", randomProp: "seomthing")

参数被发送到 stacknavigator，而不是屏幕本身。我通过传递解决了这个问题

initialParams=route.params

在堆栈导航器中，但是当我第二次调用第一个代码块时它们不会刷新。有任何想法吗？

我正在使用React-Navigation并StackNavigator在我的反应本机应用程序的顶部实现一个导航栏，它显示应用程序徽标居中和右侧的菜单按钮。不过，我无法让它占据标头容器的完整空间，左侧始终有约 20px 的边距。

正如您在我的代码中看到的，我已经应用了各种样式属性，例如margin: 0、padding: 0和to以及导航栏组件本身，但它们都没有帮助。alignment: fillwidth:100%headerStyleheaderContainerStyle

应用程序.js：

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

import {Home} from "components/Home";
import {NavigationBar} from "components/NavigationBar";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer headerStyle={styles.container}>
      <Stack.Navigator
        initialRouteName="Home" headerStyle={styles.container}
        screenOptions={{
                        headerTitleContainerStyle: styles.container,
                        headerTitleStyle: styles.title,
                        headerStyle: styles.header,
                        headerTitle: props => <NavigationBar {...props} /> …

沙盒应用程序包含两个带有 React Native Stack 导航器的屏幕。

当使用按钮显式调用“navigation.navigate("Desired Screen")”时，应用程序表现良好。但是，当尝试使用后退按钮（离开初始路线屏幕时在标题上自动创建）时，屏幕加载大约需要 2 秒。

在打开“调试”和未打开“调试”的真实 Android 设备上进行了测试。这是反应本机导航的预期行为吗？

应用程序.tsx：

import React from 'react';
import {Text, View} from 'react-native';
import {Home} from './src/screens/fornav/Home';
import {MySettings} from './src/screens/fornav/MySettings';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';

type RootStackParamList = {
  Home: undefined;
  MySettings: undefined;
};
const MyStack = createStackNavigator<RootStackParamList>();

const App = () => {
  return (
    <NavigationContainer>
      <MyStack.Navigator initialRouteName="Home">
        <MyStack.Screen
          name="Home"
          component={Home}
          options={{title: 'My Home Screen'}}
        />

        <MyStack.Screen name="MySettings" component={MySettings} />
      </MyStack.Navigator>
    </NavigationContainer>
  );
};

export default …