标签: react-navigation

如何完全更改抽屉的背景颜色？我不需要改变抽屉项目需要完全改变抽屉的背景颜色。默认情况下，它是白色的，而我需要将其设为绿色。有演示示例吗？

我正在构建一个使用react-native的跨平台本机应用程序，并使用react-navigation在屏幕之间来回导航以及使用redux管理导航状态。当我嵌套导航器时，就会出现问题。

例如，我使用Stack Navigator作为应用程序的默认导航器。

export const DefaultNavigate = new StackNavigator(
{
        Login: {
            screen: LoginScreen,
        },
        Home: {
            screen: AppDrawerNavigate,
        },
        AppTabNav: {
            screen: AppTabNavigator,
        },
    }
);

我的第一个屏幕是登录屏幕，主屏幕是抽屉式导航器。

const AppDrawerNavigate = new DrawerNavigator(
{
        InProcess: {
             screen: InProcess,
        },
        Machine: {
             screen: Machine
        },
        Settings: {
             screen: Settings
        },
        Logout: {
             screen: Logout
        },
        ContactUs: {
             screen: ContactUs
        }
    }
);

当用户在Drawer Navigator中单击Machine时，我正在将屏幕导航到DefaultNavigator中声明的AppTabNav。

const AppTabNavigator = new TabNavigator(
    {
        MachineList: {
            screen: MachineList,
        },
        CalendarView: {
            screen: CalendarView,
        }
    }, …

默认导航器和应用程序背景是一些浅灰色，围绕#e4e3eb.

我可以通过 Navigator 配置更改它吗（我使用 StackNavigator）？

注意：我不想更改标题背景颜色，已经通过 headerStyle.

有没有综合

我有一个这样的导航配置。

StackNavigator
     -> stack_screen1
     -> stack_screen2
     -> TabScreens

TabScreens
    -> tab_screen1
        -> StackNavigator
            -> screen x
            -> screen1 // common component
            -> screen2 // common component
    -> tab_screen2
        -> StackNavigator
            -> screen y
            -> screen1
            -> screen2
    -> tab_screen3
        -> StackNavigator
            -> screen z
            -> screen1
            -> screen2

这里 screen1 和 screen2 是可以从任何选项卡屏幕调用的通用组件。例如，我可以从任何选项卡屏幕显示产品显示页面。问题是如果从 say 调用 screen1tab_screen1并且我将选项卡切换到 say tab_screen2，然后调用从tab_screen2先前安装的 screen1 from访问 screen1tab_screen1并且选项卡也切换到原始选项卡。

一种解决方法是为类似的组件使用不同的密钥。但这是很多工作，因为我的应用程序中有许多共享组件，我正在将导航实验替换为反应导航。还有其他解决方案吗？

我正在开发一个简单的React Native App，并决定使用用户react-navigation。我还决定使用Flow进行静态类型检查。我不知道的是如何使用Flow定义与导航相关的道具。

例如，我将App.js定义为使用StackNavigator，如下所示：

import StackNavigator from 'react-navigation';
import Main from './app/containers/Main';

const App = StackNavigator({
  Main: { screen: Main },
});

export default App;

然后我定义了Main类，但是我不知道如何在我的道具中引用react-navigation：

// @flow

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

type Props = {
  navigate: ????
};

type State = {};

class Main extends Component<Props, State> {
   ...
}

我想将组件放置在React-Navigation V2中的createBottomTabNavigator TabBar上方。

标签栏的高度在各种设备（尤其是iOS设备）上似乎有所不同。有没有一种方法可以计算标签栏在设备上显示的高度？

我有2个标签，并放入其中 createStackNavigator

我在用

“ react-navigation”：“ ^ 2.0.1”， “ react-native”：“ 0.55.3”，

const Cstack = createStackNavigator({
    cstack: {
        screen: Screen1,
    }
},{
    headerMode:'none'
});


const Dstack = createStackNavigator({
    dstack: {
        screen: Screen2,
    },
},{
    headerMode:'none'
});
const mytabnavigator= createTabNavigator({
    Tab1: {
        screen: Cstack,
        navigationOptions: ({navigation}) => ({
            headerTintColor: 'white',
            tabBarIcon: ({focused, tintColor}) => {
                return (
                    <IconIonicons
                        name='ios-cash'
                        type='ionicon'
                        color="#FFFFFF"
                        size={26}
                    />
                );
            },

        })
    },
    Tab2: {
        screen: Dstack,
        navigationOptions: ({navigation}) => ({
            headerTintColor: 'white',
            tabBarIcon: ({focused, tintColor}) => {

                return …

我在其他StackNagigation内的透明屏幕有问题。 演示

我想在ScreenTwo中单击按钮后ScreenThree在前面显示覆盖。ScreenTwoGo to ScreenThree

我已经设置好了cardStyle，backgroundColor: 'transparent'但仍然无法正常工作。

我不知道这是怎么了？有没有人请帮助我？

import { StackNavigator } from 'react-navigation'; // 2.2.5


import React from 'react'
import { Image, View, Text, Button } from 'react-native'
import { StyleSheet, Dimensions, TouchableOpacity } from 'react-native'

export default class App extends React.Component {
  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'red'}}>
        <Root/>
      </View>
    )
  }
}

class HomeScreen extends React.Component {

  render() {

    return (
      <View style={{
        backgroundColor: 'blue', 
        flex: …

我正在进行一个诸如登录/注册应用程序之类的实践项目，并且正在从反应导航中使用堆栈导航，并且它运行良好，

现在，当用户登录时，他应该被重定向到仪表板屏幕，我想要在标题右侧添加一个抽屉 “我还添加了屏幕截图”，我也在堆栈导航中创建了仪表板屏幕，我不知道如何添加堆栈导航中的那个抽屉，我只想在我的仪表板屏幕上放置一个抽屉，以便有人可以提供帮助？谢谢

App.js（在其中添加了所有堆栈屏幕的位置）

    import React from 'react';

    import { createStackNavigator, createDrawerNavigator } from 'react-navigation';

    import HomeScreen from './screens/HomeScreen';
    import LoginScreen from './screens/LoginScreen';
    import RegisterScreen from './screens/RegisterScreen';
    import Dashboard from './screens/Dashboard';

    const StackNavigation = createStackNavigator({
      HomeStack: HomeScreen,
      LoginStack: LoginScreen,
      RegisterStack: RegisterScreen,
      DashboardStack: Dashboard,

    }, {
        initialRouteName: 'HomeStack',
      });

      const DrawerNav = createDrawerNavigator({
        DashboardStack: Dashboard,
      })


    export default class App extends React.Component {
      render() {
        return (
          <StackNavigation />
        );
      }
    }

Dashboard.js

    import React from 'react';
    import …

我在遇到问题react-navigation-drawer。

"react-native-gesture-handler": "^1.0.16",
"react-navigation": "^3.3.2"

这两个版本已安装。抽屉在Android和iPhone 5S中正常工作。但是，当我在iPhone X中运行该应用程序时，通过手势打开抽屉会引发错误。

调度了不受支持的顶级事件类型“ onGestureHandlerStateChange”