标签: react-navigation

我在第一个react-native项目中使用react-navigation https://reactnavigation.org/。我想切换我的抽屉（打开和关闭），但是我不知道该如何实现。我一直在看reactnavigation.org上的文档，但实际上找不到任何提示。

我想在登录(欢迎)后用户导航到Home.我重置了历史记录,因此用户无法像这样返回:

const actionToDispatch = NavigationActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: 'Home' })]
        });

        this.props.navigation.dispatch(actionToDispatch);

这工作正常.按下注销后,用户应该返回欢迎,但它不起作用.这就是我在做什么:

const resetAction = NavigationActions.reset({
            index: 0,
            actions: [
                NavigationActions.navigate({ routeName: 'Welcome' }),
            ]
        });

        this.props.navigation.dispatch(resetAction);

该错误表示没有"欢迎"的路线.必须是"主要","隐私","条款"之一,它们是主页中某个标签的路线.见下文:

 const AppStack = StackNavigator({
                    Welcome: {
                        screen: Welcome
                    },
                    Home: {
                        screen: Tabs
                    }
                }, {
                        initialRouteName: this.state.isLoggedIn ? 'Home' : 'Welcome',
                        headerMode: 'none'
                    }
                );

export const ProfileStack = StackNavigator({
    Profile: {
        screen: Profile,
    },
});

export const SettingsStack = StackNavigator({
    Settings: {
        screen: Settings,
    }, …

在react-navigation的DrawerNavigator，有没有办法来改变该项目的文本颜色和背景颜色？

默认情况下，配色方案如下所示：

通过以下方式初始化：

export const Drawer = DrawerNavigator({
    dOne: {
      screen: Screen1,
    },
    dTwo: {
      screen: Screen2,
    }
  }
);

设置color内财产屏幕的contentOptions的style不会出现有效果。

我是否应该为每行扩展新的组件（现在标记为“主要”，“次要”等）？还是有一种更简单的方式来对行的现有实现进行样式化？

我正在将React Navigation与React Native一起使用。这是在Android上。

1. 我试图在图标和标签栏顶部之间增加一些间距，并减小图标和标签之间的间距。

2. 我正在尝试更改底部边框的颜色，即黄线。

3. 我试图减少间距，在每个单元格内左右填充。

知道我该如何实现吗？

{
    tabBarPosition: 'bottom',
    animationEnabled: true,
    swipeEnabled: true,
    tabBarOptions: {
      showIcon: true,
      labelStyle: {
        fontSize: 8
      },
      style: {
        backgroundColor: 'grey',
      },
      tabStyle: {
        height: 49
      },
      iconStyle: {
        flexGrow: 0,
        marginTop: 1.5
      }
    }
  }

我是React Native的新手,并尝试创建我的第一个应用程序.所以我有一个问题:

我有2个屏幕(使用react-navigation).在第一个屏幕上有一个带有微调器的app徽标(来自native-base)并同时提取到服务器.而且只有在获取结束并处理响应时我才需要导航到另一个屏幕.我在react-navigation文档中找到的所有内容都是带按钮的解决方案,但这不是我的情况.另外我不想使用ActivityIndi​​catorIOS(应用程序对于Android应该是正确的).

请帮我理解我该怎么办？

非常感谢!

使用React Navigation,有没有办法从外部链接到导航器内的特定路径/屏幕？

例如,实现一个全局页脚,如下所示:

<Provider store={store}>
  <View>
     <AppNavigator />
     <MyFooter /> // Link from here to a path/screen inside AppNavigator
  </View>
</Provider>

我正在开发一个应用程序,但是goback按钮没有把我带到后面的屏幕.

App.js

import React, { Component } from 'react';
import one from './components/test/one';
import two from './components/test/two';
import three from './components/test/three';

import { DrawerNavigator } from 'react-navigation';

const AppNavigator = DrawerNavigator({
    one: {
      screen: one,
    },
    two: {
      screen: two,
    },
    three: {
      screen: three,
    },
  }
);

export default () =>
      <AppNavigator />;

组件/测试/ one.js

import React, { Component } from 'react';
import { Button } from 'react-native';

export default class one extends React.Component {
  static navigationOptions = { …

react-navigation的维护者已从库中删除了“ lazy：true”，导致所有选项卡尝试一次呈现（并且以前由lazy控制的获取现在无法正常工作）。

为了保持类似的功能，如何在第一次聚焦之前强制在选项卡屏幕上等待以不加载或调用提取调用？

我正在使用反应导航从一个屏幕导航到另一个屏幕。顺便说一下，我正在使用createStackNavigator。

我正在使用下面的代码在屏幕之间导航。

<Button onPress={()=>this.props.navigation.navigate('ScreenTwo')}>button-></Button>

它工作正常，但我想更改动画方向。目前，当我按下按钮时，会ScreenTwo弹出，而我希望屏幕从右向左滑动。

我可以在导航时更改动画方向吗？

我们如何使用redux在react-navigation中创建受保护的路由？

考虑我有一个包含以下状态的redux存储

const mapStateToProps = state => {
  return {
    isAuthenticated: state.profileInfo.isAuthenticated,
    isLoaded: state.profileInfo.isLoaded,
    googleProfileLoading: state.profileInfo.googleProfileLoading
  }
};

我正在使用React导航来导航用户。

const loginNavigation = createStackNavigator(
  {
    login: {
      screen: Login
    },
    signup: {
      screen: Signup
    }
  },
  {
    headerMode: "none"
  }
)

const allRoutes = createSwitchNavigator(
  {
    home: {
      screen: loginNavigation
    },
    user: {
      screen: user

  },
  {
    initialRouteName: "home"
  }
);

const App = createAppContainer(allRoutes);

现在，如果用户尚未登录，我想重定向到登录屏幕。

在简单的react-redux中，这通常是我通常要做的事情：https : //github.com/irohitb/SelfieApp/blob/master/client/src/routes.js

有人可以帮我弄清楚我们如何在react-native，redux和react-navigation中创建受保护的路由