时间戳

首页 > 解决方案 > 如果每个屏幕都有不同的 js 文件，如何使用 StackNavigator 在屏幕之间导航？

reactjs - 如果每个屏幕都有不同的 js 文件，如何使用 StackNavigator 在屏幕之间导航？

问题描述

对 React Native 来说相当新。我已阅读堆栈导航器文档，但仍然不知道如何执行此操作。

所以我有一个底部选项卡导航器，我想在其中一个选项卡中实现一个堆栈导航器，所以我可以从主选项卡屏幕导航到第二个屏幕，但从第二个屏幕到第三个屏幕我无法导航'找不到变量“导航”，这是可以理解的，因为我为每个屏幕使用不同的 js 文件。如何将导航变量传递到另一个屏幕？下面是我的代码：

OrderScreen.js：

imports...

import { createStackNavigator } from '@react-navigation/stack';


const Stack = createStackNavigator();

const styles = StyleSheet.create({
    ...
    }
});

function Orderscreen({ navigation }) {
    return (
        <View style={styles.welcome}>
            <View styles={styles.container}>
                <Button style={styles.button1} color="warning" uppercase onPress={() => { navigation.navigate('Scan QR code') }}><Text style={styles.buttonText}>Take me to screen SCAN QR CODE</Text></Button>
            </View>
        </View>
    )
};

import { Qrcodescanner } from './qrcodescanner';
import { Menu } from './menu';
import { render } from 'react-dom';

function MenuScreen({ navigation }) {
    return(
    <Menu></Menu>
    )
}

function QRScanScreen({ navigation }) {
    return(
        <Qrcodescanner></Qrcodescanner>
    )
}

export default function App() {
    return (
        <Stack.Navigator initialRouteName="Home">
            <Stack.Screen name="Home" component={Orderscreen} />
            <Stack.Screen name="Scan QR code" component={QRScanScreen}
                options={{
                    headerRight: () => (
                        <Button shadowless
                            onlyIcon icon="question" iconFamily="antdesign" iconSize={30} color="info" iconColor="#fff" style={{ width: 35, height: 35, marginRight: 20 }}
                        />
                    ),
                }}
            />
            <Stack.Screen name="Menu" component={MenuScreen} />

        </Stack.Navigator>
    );
}

二维码扫描器.js：

export class Qrcodescanner extends React.Component {
  ...

  render() {
    const { hasCameraPermission, scanned } = this.state;
    if (hasCameraPermission === null) {
      return <Text> Requesting for camera permission </Text>;
    }
    if (hasCameraPermission === false) {
      return <Text> No access to camera </Text>;
    }
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
          justifyContent: 'flex-end',
        }}> ...
      </View>
    );
      }
  handleBarCodeScanned = ({ type, data}) => {
    this.setState({
      scanned: true,
    });
    alert(`Bar code with type ${type} and data ${data} has been scanned!`);

    navigation.navigate('Menu')
};

  };

所以当我扫描某些东西时，它应该导航到“菜单”屏幕，但我得到了错误：“找不到变量：导航”。如何将导航变量传递给不同的 js 文件？

标签： reactjsreact-nativeexpo

解决方案

我已经看到你的 cod 并为你找到了解决方案你只需要创建一个新文件NavigationServices.js

import { NavigationActions } from "react-navigation";

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params
    })
  );
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator
};

然后将文件导入您的.js文件并使用它来导航，就像您的OrderScreen.js:

import NavigationService from "../NavigationService";

并像这样使用它。

NavigationService.navigate("Qrcodescanner");

推荐阅读