Question

这是我的第一个 React Native 项目，我被卡住了，需要帮助。以下是我的代码。我想做的是跟随。

登陆屏幕将显示所有项目的列表和底部标签菜单。
一旦有人点击项目，就会打开项目详情页面。

App.Js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
import React from 'react';
import App from './src';
import { Provider as PaperProvider } from 'react-native-paper';

export default App;

src/navigations/index.js

import * as React from 'react';
import { Text, View, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import { List, Button, TextInput, FAB, Avatar, Card, Title, Paragraph } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator} from '@react-navigation/stack';
import ProjectList from '_scenes/projects';
import NewProject from '_scenes/projects/addproject';
import ProjectDetail from '_scenes/projects/projectdetails';
import Settings from '_scenes/settings';


const Tab = createBottomTabNavigator();


const Projects = ({ navigation }) => (
    <ProjectList navigation={navigation} />
);


function SettingsScreen( { navigation} ) {
  return (
    <Settings />
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="HomeScreen">
        <Tab.Screen name="Home" component={Projects} options={{ tabBarBadge: 3 }}/>
        <Tab.Screen name="Settings" component={SettingsScreen} options={{ tabBarBadge: 2 }}/>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

src/scenes/projects/index.js

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';
import { Item, List, Button } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator} from '@react-navigation/stack';
import NewProject from '_scenes/projects/addproject';
import ProjectDetail from './projectdetails';

ProjectList = ({ navisation }) => {

  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('http://xxx.xxx.xxx.xxx/projects')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  function Projects ( {navigation }) {
    return (
      <View style={{ flex: 1, padding: 24 }}>
        <FlatList
        data={data} 
        keyExtractor={({ id }, index) => id}
        renderItem={renderProject}
        />
      </View>
    )
    }

  const renderProject = ({ navigation, item }) => (
    <List.Item
    title={item.title}
    description={item.description}
    onPress={() => navigation.navigate('ProjectDetails')}
    />
  );

  const AddProject = ({ navigation }) => (
      <NewProject />
  );

  function ProjectDetails({navigation}) {
    return (
      <ProjectDetail />
    );
  }

  function Chat({navigation}) {
    return (
      <View>
        <Text>Chat</Text>
      </View>
    );
  }



  const Stack = createStackNavigator();
  return (
    <Stack.Navigator>
      <Stack.Screen title="Home" name="Home" component={Projects} options={{headerShown: false}}/>
      <Stack.Screen title="Add Project" name="AddProject" component={AddProject} />
      <Stack.Screen title="Project Details" name="ProjectDetails" component={ProjectDetails} />
      <Stack.Screen title="Chat" name="Chat" component={Chat} />      
    </Stack.Navigator>

    );
};

export default ProjectList;

如果您看到“renderProject”，我想在点击时导航到“ProjectDetails”。但我收到错误 'TypeError: undefined is not an object (evaluating 'navigation.navigate')' 让我知道出了什么问题？

React Native 'TypeError: undefined is not an object (evaluating 'navigation.navigate')'

0 个答案: