标签: react-navigation

我想要关于这个先前主题的更新。当时，react-native-navigation似乎比React Navigation具有更好的性能。

新版本怎么样？

例如，使用 StackNavigator 会因为推送视图而减慢我的应用程序，我更喜欢使用而this.props.navigation.replace('NewPage')不是this.props.navigation.navigate('NewPage')为了更好的性能。

但是我听说过 react-native-navigation 并且想知道性能方面的差异是否真的相关。

这是 的工作代码块createStackNavigator({...})，其中的块initialRouteName被注释掉。

const navigator = createStackNavigator(
  {
    Event:  Event,
    Signup: Signup,
    Verif1: Verif1,
    Chat: {
      screen: ChatWithSocket,

    } 
  },  /*{
    initialRouteName: Signup,
  }  */
);

const AppContainer = createAppContainer(navigator);
export default AppContainer;  

该应用程序正在运行React Native 0.59.5和react navigation 3.9.1。如果initialRoutesName启用了块（注释已删除）。然后它弹出一个错误：

根据我的在线阅读，问题似乎是React Navigation模块的配置问题。

我是本机反应的新手，我正在使用react-navigation和react-navigation-material-bottom-tabs。

我想要做的就是弯曲底部标签栏的右上角和左上角。

我的代码：

const screen1 = createMaterialBottomTabNavigator(
    {
        Home: {
            screen: HomeScreen,
            style : {
                backgroundColor: 'black'
            }
        },
        About: AboutScreen,
        Scan: ScanScreen,
        Fav: AllScreen
    },
    {
        initialRouteName: "Home",
        activeColor: 'red',
        inactiveColor: 'blue',

        barStyle: {
            borderWidth: 0.5,
            borderBottomWidth: 1,
            backgroundColor: 'white',
            borderBottomLeftRadius: 0,
            borderBottomRightRadius: 0,
            borderTopLeftRadius: 15,
            borderTopRightRadius: 15,
            borderTopColor: '#000',
            borderBottomColor: '#000',
            borderLeftColor: '#000',
            borderRightColor: '#000',
        },
    }
);

捆绑失败：错误：无法react-navigation-stack从App.js以下位置解析模块：在项目中找不到 react-navigation-stack。

我尝试删除节点模块并重新安装它们，清除缓存，在新的新项目中尝试相同但没有结果

Package.json 文件

{
  "name": "navigator",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.2",
    "react-native-gesture-handler": "^1.4.1",
    "react-native-reanimated": "^1.3.0",
    "react-native-screens": "1.0.0-alpha.23",
    "react-navigation": "^4.0.10"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

应用程序.js

    import React from 'react';
    import { …

大家好，我正在尝试在我的应用程序中添加 react-navigation-drawer，我正面临这个问题。每当我打开抽屉时，背景或背景都会变成不透明的黑色。我尝试添加背景颜色，但对我不起作用。这是我的侧边栏代码：-

import { Text, TouchableOpacity, View,StyleSheet, ScrollView, Dimensions,BackHandler} from "react-native";
import Icon from 'react-native-vector-icons/Entypo';
const { width, height } = Dimensions.get("window");
const window = Dimensions.get("window");
let h = window.height / 812;
let w = window.width / 375;
let p = (h + w) / 2;

export default class SideBar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            refreshing: true,
            index: '',
        }
    }

    componentDidMount() {
        BackHandler.addEventListener("hardwareBackPress", () => this.hardwareBackPress);
    }

    componentWillUnmount() {
        BackHandler.removeEventListener("hardwareBackPress", () => this.hardwareBackPress);
    }

    hardwareBackPress() …

我正在使用 react-navigation v5 并以App.js这样的方式结束

const MainStack = createStackNavigator();

export default () => (
  <NavigationNativeContainer>
    <MainStack.Navigator
      screenOptions={{
        header: () => <AppbarHeader />,
      }}
    >
      <MainStack.Screen name="index" component={index} />
      <MainStack.Screen name="alternate" component={alternate} />
    </MainStack.Navigator>
  </NavigationNativeContainer>
);

我想添加一个浮动操作（FAB）按钮，该按钮将在index和alternate页面底部可见，允许用户显示当前省略的模态。现在我觉得唯一的解决方案是将我的 FAB 组件放在index和alternate组件中，但这似乎不对，因为它不应该重新渲染并过渡到页面中。它应该漂浮在页面过渡上方。我觉得它应该更像是某种全局导航器，但我不确定它应该如何与上面显示的现有 StackNavigator 一起使用。

我期待着提供任何解决方案。