Question

我正在尝试在我的 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, { 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 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 ，但我仍然收到此错误。有谁知道我做错了什么？我试图尽可能地清理代码。任何帮助表示赞赏。

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

0 个答案: