标签: react-native-navigation

React Navigation V5 隐藏底部标签

我希望能够使用 React Native Navigation v5 隐藏屏幕上的选项卡。

我一直在阅读文档,但似乎他们并没有为 v5 更新这个,它指的是 < v4 的做事方式。

这是我的代码:

import Home from './components/Home';
import SettingsScreen from './components/Settings';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

const SettingsStack = createStackNavigator();
const ProfileStack  = createStackNavigator();

function SettingsStackScreen() {
    return (
        <SettingsStack.Navigator>
            <SettingsStack.Screen name="Settings" component={SettingsScreen} />
        </SettingsStack.Navigator>
    )
}

function ProfileStackScreen() {
    return (
        <ProfileStack.Navigator>
            <ProfileStack.Screen name="Home" component={Home} />
        </ProfileStack.Navigator>
    )
}

const …
Run Code Online (Sandbox Code Playgroud)

javascript react-native react-native-navigation react-navigation

11
推荐指数
2
解决办法
2万
查看次数

React Native Navigation和Redux Persist

我正在尝试将redux-persist与wix react-native-navigation集成.但是,我无法找到任何说明集成两个库所需的样板代码的示例或文档.

我想知道是否有人想分享他们的解决方案,如果他们已经解决了这个问题?

react-native redux react-native-navigation redux-persist

10
推荐指数
1
解决办法
8612
查看次数

如何添加侧栏抽屉与原生导航v2?

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

drawer: {
    left: {
        screen: 'ScreenName'
    }
}
Run Code Online (Sandbox Code Playgroud)

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

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

react-native-navigation wix-react-native-navigation react-native-navigation-v2

10
推荐指数
1
解决办法
7075
查看次数

如何使用全局ScreenVisibilityListener类?

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

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

react-native-navigation wix-react-native-navigation

9
推荐指数
1
解决办法
538
查看次数

React Native Navigation v2(wix)禁用TopBar

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

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

Navigation.setDefaultOptions({
  topBar: {
    visible: false,
    _height: 0,
    drawBehind: true,
  },
});
Run Code Online (Sandbox Code Playgroud)

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

有没有办法禁用topBar?

最好的祝福

更新

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

Navigation.setDefaultOptions({
  topBar: {
    visible: false,
    _height: 0,
    drawBehind: true,
  },
});
Run Code Online (Sandbox Code Playgroud)

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

android react-native-navigation wix-react-native-navigation react-native-navigation-v2

9
推荐指数
1
解决办法
2494
查看次数

自定义组件顶部按钮事件RNN v2

我的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 (
              ...
        );
    }
}
Run Code Online (Sandbox Code Playgroud)

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

reactjs react-native react-native-navigation react-native-navigation-v2

9
推荐指数
1
解决办法
200
查看次数

如何使用 React Native Navigation (v5) 将数据发送到父页面?

我在我的 GraphQL Apollo 客户端项目中使用https://reactnavigation.org/(版本 5.0.1)。

我有一个带有表单的页面,用户需要在其中从列表中选择一些选项。
在第一页中,我有一个带有以下代码的按钮:

props.navigation.navigate('SelectTagsPage', {
            onSelect: (selectedIds) => {
              // update the form state
              setTagsIds(selectedIds)
            },
          });
Run Code Online (Sandbox Code Playgroud)

在标签页面上,我有这个:

const { onSelect } = props.route.params;

//...

<Button onPress={() => { onSelect(ids) }}>
Run Code Online (Sandbox Code Playgroud)

所以,基本上我在调用 时传递了一个函数navigation.navigate,我正在执行这个函数以将数据发送回初始屏幕。

这工作得很好,但是当我打开标签页时,我收到了这个警告:

我们在导航状态中发现了不可序列化的值,这可能会破坏诸如持久化和恢复状态之类的用法。如果您在 params 中传递不可序列化的值(例如函数、类实例等),则可能会发生这种情况

如果在 params 中传递函数是一个问题,那么实现将数据从页面发送到父页面的相同功能并解决此警告消息的最佳方法是什么?

javascript react-native react-native-navigation react-navigation

9
推荐指数
1
解决办法
7255
查看次数

深层链接启动Splash Activity而不是Main Activity

我按照本指南 - Splash屏幕以正确的方式为我的Android应用程序创建了一个Splash屏幕,所以现在我有2个活动(MainActivity和SplashActivity)

问题是Deep Links错过现在的行为,而不是启动MainActivity它们启动它SplashActivity.

SplashActivity除了应用程序启动时,我不希望它出现.

我能做什么?

SplashActivity:

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}
Run Code Online (Sandbox Code Playgroud)

主要活动:

public class MainActivity extends SplashActivity implements OnImagePickerPermissionsCallback {

    private PermissionListener listener;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public void setPermissionListener(PermissionListener listener)
    {
        this.listener = listener;
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults)
    {
        if …
Run Code Online (Sandbox Code Playgroud)

java android deep-linking android-manifest react-native-navigation

8
推荐指数
1
解决办法
2293
查看次数

如何通过设备锁定屏幕冷启动React Native应用程序?

我正在React Native上构建VoIP应用程序,该应用程序使用推送通知检测来电。我需要启动应用程序,并在收到推送通知时将其置于前台。我能够在以下情况下实现:

  1. 解锁设备后:
    • 该应用程序已最小化(仍在后台)
    • 该应用程序不在后台(从多任务视图中删除)
  2. 设备锁定时:
    • 该应用程序已最小化(仍在后台)

我无法处理的唯一情况是设备被锁定并且应用被杀死时。该应用程序启动,但未显示在锁定屏幕上。相反,用户需要解锁手机才能访问应用程序。

这是收到通知时运行的代码,

@Override
public void onMessageReceived(RemoteMessage remoteMessage) {
    Intent notificationIntent = new Intent(this, MainActivity.class);
    // Check if app is running

    if(MainActivity.isAppRunning) {
        startActivity(notificationIntent);
        Intent messagingEvent = new Intent(MESSAGE_EVENT);
        messagingEvent.putExtra("message", remoteMessage);
        // Broadcast it so it is only available to the RN Application
        LocalBroadcastManager
                .getInstance(this)
                .sendBroadcast(messagingEvent);
    } else {
        startActivity(notificationIntent);
        try {
            // If the app is in the background we send it to the Headless JS Service
            Intent headlessIntent = new Intent(
                    this.getApplicationContext(), …
Run Code Online (Sandbox Code Playgroud)

java android react-native react-native-android react-native-navigation

8
推荐指数
1
解决办法
619
查看次数

找不到导航对象。您的组件是否在导航器的屏幕内?

在我下面的代码中,当我使用 useNavigation() 时,它会给出一个错误,比如我的问题如何使用 useNavigation,请任何人都可以解决这个错误...错误:找不到导航对象。您的组件是否在导航器的屏幕内?我按照这里的代码https://rnfirebase.io/messaging/notifications#handling-interaction

import React, {useState, useEffect } from 'react';
import messaging from '@react-native-firebase/messaging';
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import { createStackNavigator, HeaderTitle, } from "@react-navigation/stack";
const Stack = createStackNavigator();

function App(props) {
     const navigation = props.navigation
    //const navigation = useNavigation();
    const [initialRoute, setInitialRoute] = useState('Splash Screen');

    useEffect(() => {
        messaging().onMessage(remoteMessage => {
            navigation.navigate("Description Screen");
            console.log(props.navigation)
        });
    }, []);

    return (
        <NavigationContainer>
            <Stack.Navigator
                initialRouteName={initialRoute}
                headerMode="none"
                screenOptions={{
                    gestureEnabled: true,

                }}
            >

                <Stack.Screen name="Splash Screen" component={SplashScreen} />
                <Stack.Screen …
Run Code Online (Sandbox Code Playgroud)

android ios react-native react-native-navigation react-navigation-stack

8
推荐指数
1
解决办法
9611
查看次数