结合抽屉导航和堆栈导航？ - 反应本机

问题描述

我正在尝试在我的 React Native 应用程序中组合 2 个抽屉。这样做的原因是能够从抽屉导航中隐藏 1 个屏幕。

我尝试过的是创建一个名为 Datails.JS 的单独文件，其中包含以下代码

import 'react-native-gesture-handler';
import React,{ useState,useEffect } from 'react';
import { imagebackground,Linking,Text,View,Button,TouchableOpacity,StatusBar,FlatList,SafeAreaView,Image  } from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import { DrawerActions } from '@react-navigation/native';
import App from  '../App';

function test() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="DetailsScreen" component={DetailsScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }

    function DetailsScreen({ route,navigation }) {
    const { itemId } = route.params;
    console.log('DetailsScreen',itemId);
    const [isLoading,setLoading] = useState(true);
    const [data,setData] = useState([]);
    useEffect(() => {
    const apiurl = 'http://***.***.***.***:****/******' + itemId;
    console.log(apiurl)
    fetch(apiurl)
    .then((response) => response.json())
    .then((json) => setData(json))
    .catch((error) => console.error(error))
    .finally(() => setLoading(false));
  },[itemId]);
  
    return (
              // Return stuff from the API on the player clicked on in the prevIoUs screen.
)

位于 app.js 中的播放器屏幕如下所示

import 'react-native-gesture-handler';
import React,Image  } from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import { DrawerActions } from '@react-navigation/native';
import styles from './styles';
import Details from './components/Details'

function PlayeRSScreen( { navigation } ) {
  const [isLoading,setLoading] = useState(true);
  const [data,setData] = useState([]);

  useEffect(() => {
  fetch('http://***.***.***.***:****/********',{ credentials: "same-origin",headers: {
    Accept: 'application/json','Content-Type': 'application/json'
   },},)
    .then((response) => response.json())
    .then((json) => setData(json))
    .catch((error) => console.error(error))
    .finally(() => setLoading(false));
    
},[]);



  return (
          <View>
            
              <View>
      <SafeAreaView>
          <Text style={styles.headingText}>Select player</Text>
    </SafeAreaView>

         <FlatList
            data={data}
            keyExtractor={item => item.Name}
            renderItem={({ item }) => (
      <View>
          <Text 
            style={styles.listStyle} onPress={() => {navigation.navigate('DetailsScreen',{itemId: item._id})}}>{item.Name}
          </Text>
      </View>

  );
}



const Drawer = createDrawerNavigator();

app.js

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Hem" drawerPosition="right" drawerType="slide" >
        <Drawer.Screen name="Hem" component={HomeScreen} style={styles.drawerItem}/>
        <Drawer.Screen name="Kontakt" style={{color: 'red'}} component={ContactScreen} />
        <Drawer.Screen name="Spelare" component={PlayeRSScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};
   

在播放时单击平面列表中的某些内容时出现错误，询问我是否真的有详细信息屏幕。我在 detail 和 reverse 中导入文件 app js ，但我仍然收到此错误。有谁知道我做错了什么？我试图尽可能地清理代码。 任何帮助表示赞赏。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）