Реагировать на встроенную навигацию в плоский список

Question

Я использую плоский список для отображения списка данных. Я могу sh передать данные на другие страницы, но я понятия не имею, какой тип навигации я использую.

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>
    );
  }
}

import React, { Component } from 'react';
import {StyleSheet, View, StatusBar,Text} from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

import HomeScreen from '../pages/HomeScreen'
import YourActivitiesScreen from '../pages/YourActivitiesScreen'
import YourFavouriteScreen from '../pages/YourFavouriteScreen'


const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <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>
  );
}

export default function SideMenu() {

  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

import React, { Component } from 'react';
import {Router, Stack, Scene} from 'react-native-router-flux';
import Login from './pages/Login';
import Signup from './pages/Signup';
import SideMenu from './components/SideMenu'


export default class Routes extends Component {
    render() {
        return(
            <Router>
                <Stack key="root" hideNavBar>
                    <Scene key="login" component={Login} title="Login" initial/>
                    <Scene key="signup" component={Signup} title="Signup" />
                    <Scene key="home" component={SideMenu} title="HomeScreen" />
                </Stack>
            </Router>
        );
    }
}

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    AsyncStorage,
    TouchableOpacity,
    FlatList,
    Button,
} from 'react-native';
import DetailsScreen from './Details';

import { createDrawerNavigator, SafeAreaView } from 'react-navigation';
class HomeScreen extends Component{

    constructor(props) {
        super(props);
        this.state = {
            activitiesList: [],   
        }
    };
    renderItem = (item) => {
       return (
         <TouchableOpacity
           onPress={() => {

           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>
        )
    }
}

Я использовал реакционную систему -router-flux на ранней части системы, которая является логином, регистрацией и домом. Теперь дома отобразите плоский список, из плоского списка я должен сделать onPress для перехода на другие страницы. Действия в router-flux, которые я использовал ранее, не могут работать. У кого-нибудь есть идеи по этому поводу? или другой лучший способ перейти к деталям flatlist?

Answer 1

Во-первых, я бы реорганизовал весь код, чтобы использовать только один тип навигатора (в нашем случае это будет react-navigation). Итак, у нас будет ваш код маршрутизатора потока вместе с вашим

//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

. Вы обернет свой App.js компонент этим AppContainer. То, что мы только что сделали, это вложили навигацию, ваш Home будет достигнут первым, и ваш ящик будет таким же. Кроме того, в вашем коде отсутствует один стек, который предназначен для Details.

Сразу после этого вы собираетесь использовать все действия, начиная с react-navigation. Все экраны получат navigation реквизит. Как только вы захотите перейти от вашего Root, вы будете вызывать навигацию так же, как props.navigation.navigate("Home").

То же самое будет применяться для перехода к вашему экрану сведений из FlatList.

//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>
        )
    }
}

Только что добавил навигационное действие к коду выше. Вы должны получить доступ к объекту params на экране сведений

//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> },
});

. Надеюсь, это поможет, по крайней мере, в качестве руководства. Я не проверял это, поэтому я попросил вас загрузить свой код на выставку.

Answer 2

Я использую реагировать-навигацию и не может быть счастливее. Вся необходимая навигация может быть выполнена с помощью простого:

this.props.navigation.navigate('ScreenName', {param1: 'Hello', param2: 'World'})

, а затем, когда на нужном экране, получите параметр:

const { param1, param2 } = this.props.route.params;

Подробнее здесь .

И, конечно, если использовать функциональные компоненты, это еще проще.