标签: react-navigation

我正在使用官方的反应导航来处理我的导航.我有一个主要的TabNavigator用于整个应用程序,有两个选项卡(称为HitchhikingMapNavigator和SettingsNavigator下面),每个选项卡都有一个嵌套的StackNavigator:

const HitchhikingMapNavigator = StackNavigator({
  hitchhikingMap: { screen: HitchhikingMapViewContainer },
  spotDetails: { screen: SpotDetailsViewContainer }
}, {
  navigationOptions: {
    header: {
      visible: false
    }
  }
});

const SettingsNavigator = StackNavigator({
  // some other routes
});

export default AppNavigator = TabNavigator({
  hitchhikingMap: { screen: HitchhikingMapNavigator },
  settings: { screen: SettingsNavigator }
}, {
  navigationOptions: {
    header: {
      visible: false,
    },
 },
});

正如你所看到的那样,即使在我看来,我也把标题的可见性放在了虚假的地方HitchhikingMapViewContainer:

class HitchhikingMapView extends React.Component {

  static navigationOptions = {
    title: …

我正在使用react-navigation,我无法更改默认"后退"按钮的区域设置.

在我的Stack Navigator中,如果我写下主页的标题,如果它不是太长,它将显示页面标题而不是"后退".

export const Root = StackNavigator({
Index: {
    screen: Index,
    navigationOptions: ({ navigation }) => ({
        title: "My App name", //Not working when too long
    }),
},

我怎样才能做到这一点 ？

我正在使用react-navigation和 stack-navigator 来管理我的屏幕。

我正在使用的平台：

• 安卓
• 反应本机：0.47.1
• 反应导航：1.0.0-beta.11
• 模拟器和设备

我有一个屏幕，它充当模态形式，但它实际上是一个全屏。为什么“作为模态形式”的部分很重要？那是因为它是一种带有一些选项和透明背景颜色的模态菜单。

这是我的期望：

但我得到的是：

如您所见，在第二个示例中，背景颜色被完全替换，或者之前加载的组件被卸载，因此我想要达到的效果丢失了。 这个想法是能够像任何其他屏幕一样导航到这个屏幕。

如果使用 react-navigation 无法完成，我可以采取什么其他方式来完成？

该组件执行操作（redux），因为它是一个跨应用程序组件并在内部封装了许多机制和逻辑，这就是为什么我不能将它用作PureComponent使用此组件的中继。至少，使这个组件成为 PureComponent 将迫使我在许多其他组件中复制许多机制和逻辑。

为了这个问题，也为了避免问题太大，两个屏幕的风格完全相同，但推动的一个StackNavigation取代了backgroundColor，或者卸载了以前的屏幕。

这是我到目前为止所拥有的：

//PlaylistSelector.js
render() {
  //Just a full size empty screen to check and avoid bugs
  //Using red instead of transparent, works

  return (
    <View style={{ flex: 1, backgroundColor: 'transparent' }}>
    </View>
  );
}

//Navigator.js
import { StackNavigator } from 'react-navigation';

import Album from './Album'; //This is …

我正在使用react-navigation 1.2.1,并且每当我将react-navigation更新到2.0.0时,每件事情都正常工作,它会产生以下错误.知道为什么一定要发生吗？

ReactNavigation.addNavigationHelpers不是一个函数.

import * as ReactNavigation from 'react-navigation';

render() {
    const { dispatch, nav } = this.props;
    const navigation = ReactNavigation.addNavigationHelpers({
      dispatch,
      state: nav,
      addListener,
    });

    return <AppNavigation navigation={navigation} />;
  }

//"react-navigation": "2.0.0",
//"react-native": "0.53.3",
//"redux": "^3.7.2"

我正在学习如何将tabNavigator,DrawerNavigator和StackNavigator配置成一个没有NativeBase或Expo的单一反应导航库.

我实现了它,但是当我在我的应用程序中执行某些特定序列时出现错误.

应用程序从Tab Screen开始. - >更改选项卡 - >打开抽屉 - >转到堆栈 - >打开抽屉然后转到选项卡会出现此错误.

这是我的代码:

App.js

import React from 'react';
import {Drawer} from "./src/navigation/MergedNavigator";
import {View,Text} from "react-native";

const App = () => (
    <View style={{flex: 1,backgroundColor: '#293656'}}>
        <Drawer />
    </View>
);

export default App;

MergedNavigator.js

import {DrawerNavigator,StackNavigator,createBottomTabNavigator} from 'react-navigation';

// stack navigation screens
import DetailScreen from '../screens/detail';
import MainScreen from '../screens/main';
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';

// tab navigator screens
import LoginScreen from '../screens/Login';
import TabOne from '../screens/tabA'; …

所以我有这个要求。要使标签导航具有这种精确的外观：

我用渐变和按钮设计标签栏没有问题。我使用以下代码创建了自己的自定义代码：

export default createBottomTabNavigator({
  (... routes here)
}, {
  initialRouteName: "Inspiration",
  tabBarComponent: props => <BottomTabBar {...props} />
})

但是现在我在使用中间按钮时遇到了麻烦。我的酒吧看起来像这样：

如果我删除删除此行的自定义标签栏：

tabBarComponent: props => <BottomTabBar {...props} />

然后现在我的中间按钮看起来应该如何，但当然，所有其他样式都丢失了：

这是我的 BottomTabBar 组件现在的样子：

import React from "react";
import { Image, StyleSheet, Text, TouchableOpacity } from "react-native";
import { TabBarBottomProps, NavigationRoute } from "react-navigation";
import LinearGradient from "react-native-linear-gradient";

const iconBag = require("./images/bag.png");

export default function BottomTabBar(props: TabBarBottomProps) {
  const {
    renderIcon,
    getLabelText,
    activeTintColor,
    inactiveTintColor,
    onTabPress,
    onTabLongPress,
    getAccessibilityLabel,
    navigation
  } = props;

  const { …

大家好，我想在 React Native 中创建时尚且自定义的底部标签导航，任何人都知道如何在上面创建此提及

React Navigation v3 具有initialRouteParams属性，用于将初始值传递给this.navigation.props。有没有办法设置初始路由参数以通过React Navigation v5 中的route.params访问？

function MainScreen({route, navigation}) {
    return (
        // how to pass default values to route in here?
        // route.params.userParam ?
        ...
    );
}

我在 Stack Navigator 中有一个 Tab Navigator，我希望将标题标题动态配置为所选选项卡的标题。就像有 3 个选项卡：主页、个人资料、添加项目，我希望标题在主页选项卡中为“主页”，在个人资料选项卡中为“个人资料”。

我尝试在根导航器上使用 onStateChange 并在选项卡导航器上使用 setOptions 但 onStateChange 仅在嵌套导航器中可用，而在嵌套导航器中不可用。

他们无论如何我可以存档吗？

导航器配置是：

const TabNav = (
   <Tab.Navigator>
      <Tab.Screen name='Home' component={HomeScreen}/>
      <Tab.Screen name='Profile' component={ProfileScreen}/>
      <Tab.Screen name='Add Item' component={AddItemScreen}/>
   </Tab.Navigator>
)

<NavigationContainer>
   <Stack.Navigator>
      <Stack.Screen name='Login' component={LoginScreen}/>
      <Stack.Screen name='App' component={TabNav}/>
   </Stack.Navigator>
</NavigationContainer>

我收到此错误：

C:/Users/Mobile/node_modules/@react-navigation/drawer/lib/module/views/ResourceSavingScene.js Attempted import error: 'shouldUseActivityState' is not exported from 'react-native-screens'. 在我能够进行登录身份验证之前，现在它说 405 错误我不知道这是否与此有关错误与否。我正在使用 react native expo 创建项目。