Javascript 在flatlist中响应本机导航

我使用flatlist来显示数据列表。我希望将数据传递到其他页面，但我不知道我使用哪种导航

import Routes from './src/Routes';


export default class App extends Component<Props> {
  render() {

    return (
      <View style={styles.container}>
        <StatusBar 
          backgroundColor="#1c313a"
          arStyle="light-content" 
        />
        <Routes/>
      </View>
    );
  }
}

我在系统的早期使用了react本地路由器流量，即登录、注册和主页。现在主页显示平面列表，从平面列表中我必须按下按钮导航到另一个页面，我以前使用的路由器流量中的操作无法工作。有人知道吗？或者另一种更好的方式导航到flatlist的详细信息？

我用过，而且再高兴不过了。所有需要的导航都可以通过一个简单的：

this.props.navigation.navigation'ScreenName'，{param1:'Hello'，param2:'World'} 然后，在需要的屏幕上，获取参数：

const{param1，param2}=this.props.route.params； 更多细节

---

当然，如果使用功能组件，则更容易。

首先，我将重构所有代码，以便在本例中仅使用一种导航器，即react导航。所以，我们将把你的路由器流量代码与你的

//Your routes screen
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
//... add missing imports

const Stack = createStackNavigator();

//this will be your old router-flux
const Root = () => {
  return (
  <Stack.Navigator>
    <Stack.Screen name="login" component={Login} title="Login" initial/>
    <Stack.Screen name="signup" component={Signup} title="Signup" />
    <Stack.Screen name="home" component={SideMenu} title="HomeScreen" />
  </Stack.Navigator>
 )
} 

const Drawer = () => {
  return (
  <Drawer.Screen 
        name="Home"
        component={HomeScreen}
        options={{ drawerLabel: 'Home' }}
      />
  <Drawer.Screen
        name="Your Activities"
        component={YourActivitiesScreen}
        options={{ drawerLabel: 'Your Activities' }}
      />
  <Drawer.Screen
        name="Your Favourite"
        component={YourFavouriteScreen}
        options={{ drawerLabel: 'Your Favourite' }}
      />
  </Drawer.Navigator>
 )
}

const AppContainer = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Root" component={Root} />
        <Stack.Screen name="Drawer" component={Drawer} />
        //import your Details screen to use inside component
        <Stack.Screen name="Details" component={Details} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppContainer

刚刚在上面的代码中添加了导航操作。您必须在详细信息屏幕中访问params对象

//Details Screen
class DetailsScreen extends React.Component {
  render() {
    const { routes } = this.props;
    return (
      <View>
      //Your component
        <Text>{routes.data.name}</Text>
      </View>
    );
  }
}

只是旁注。如果在导航到嵌套堆栈时遇到问题，可以使用params以这种方式进行导航

navigation.navigate(<YourParent>, {
  screen: <YourDesiredScreen>,
  params: { <YourObject> },
});

---

我希望它能有所帮助，至少作为一个指南。我没有测试它，这就是为什么我要求您将代码上传到expo

我更新了有问题的代码，我不明白如何将其插入到代码中。你能再指出一些吗？你能给我们看看路由器代码吗？我的意思是，指定所有要导航的屏幕、堆栈等等。你想用onPress进入哪个屏幕？最后但并非最不重要的一点是，定义是否使用react导航或路由器流量，因为两者都不是一个好主意。@IanVasco更新了这个问题。对不起，我对react native还不熟悉，所以我只是在线学习教程。现在我不知道如何继续下去。我想把平面列表中的项目放到一个显示details@IanVasco先生，你知道吗？你能把你的代码上传到世博会的快餐店或代码沙箱里吗？这样我就可以用更多的信息来查看了detail@IanVasco无法获取这些工具中的依赖项。你能检查一下我的代码并给出一些建议来添加导航吗？

//Your routes screen
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
//... add missing imports

const Stack = createStackNavigator();

//this will be your old router-flux
const Root = () => {
  return (
  <Stack.Navigator>
    <Stack.Screen name="login" component={Login} title="Login" initial/>
    <Stack.Screen name="signup" component={Signup} title="Signup" />
    <Stack.Screen name="home" component={SideMenu} title="HomeScreen" />
  </Stack.Navigator>
 )
} 

const Drawer = () => {
  return (
  <Drawer.Screen 
        name="Home"
        component={HomeScreen}
        options={{ drawerLabel: 'Home' }}
      />
  <Drawer.Screen
        name="Your Activities"
        component={YourActivitiesScreen}
        options={{ drawerLabel: 'Your Activities' }}
      />
  <Drawer.Screen
        name="Your Favourite"
        component={YourFavouriteScreen}
        options={{ drawerLabel: 'Your Favourite' }}
      />
  </Drawer.Navigator>
 )
}

const AppContainer = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Root" component={Root} />
        <Stack.Screen name="Drawer" component={Drawer} />
        //import your Details screen to use inside component
        <Stack.Screen name="Details" component={Details} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppContainer

//Your Home Screen
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    AsyncStorage,
    TouchableOpacity,
    FlatList,
    Button,
    SafeAreaView
} from 'react-native';

class HomeScreen extends Component{

    constructor(props) {
        super(props);
        this.state = {
            activitiesList: [],   
        }
    };
    renderItem = (item) => {
       return (
         <TouchableOpacity
           onPress={() => {
           props.navigation.navigate("Details", { data: item })
           console.log('test')

          }}
          >
                <View style={styles.item}>
                  <Text style={styles.title}>{item.name}</Text>
                </View>
              </TouchableOpacity>
            );
          }

    render(){
        const listActivities = this.state.activitiesList

        return (
            <View>
                <View style={styles.container}>
                    <Text style={styles.heading}>UPCOMING ACTIVITIES</Text>
                </View>
                <View>
                    <SafeAreaView>
                        <FlatList
                            data = {listActivities}
                            renderItem={({ item }) => this.renderItem(item)}
                            keyExtractor={item => item.id}
                        />
                    </SafeAreaView>
                </View>
            </View>
        )
    }
}

//Details Screen
class DetailsScreen extends React.Component {
  render() {
    const { routes } = this.props;
    return (
      <View>
      //Your component
        <Text>{routes.data.name}</Text>
      </View>
    );
  }
}

navigation.navigate(<YourParent>, {
  screen: <YourDesiredScreen>,
  params: { <YourObject> },
});