Реактивная навигация в компоненте Flatlist по нескольким файлам - PullRequest
Новая
       14

Реактивная навигация в компоненте Flatlist по нескольким файлам

0 голосов
/ 03 ноября 2018

Я использую реагирующую навигацию для навигации, и сейчас я пытаюсь перемещаться между экранами, используя мой плоский список. Я хочу, чтобы при нажатии на элемент в списке, который я получал, отправлялся на экран «Детали», но всякий раз, когда я нажимал на элемент в списке с этим кодом, ничего не происходило. Я попытался передать свойство навигации от компонента Homescreen компоненту MyListItem, но затем я получил значение undefined - это не ошибка объекта.

Тем не менее, у меня есть Test TouchableOpacity в моем компоненте Homescreen, и если я нажимаю на него, я могу перейти к экрану сведений (см. «Тест» текста в компоненте Homescreen).

Я думаю, что сделал что-то не так со свойством навигации, но я искал везде и не нашел решения.

Это мой файл App.js со StackNavigator: 

import React from 'react';
import { createStackNavigator } from 'react-navigation'

import HomeScreen from './screens/HomeScreen'
import DetailScreen from './screens/DetailScreen'

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailScreen,
  },
  {
    initialRouteName: 'Home',
    navigationOptions: {
      header: null,
    },
  }
);


export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

Это мой файл HomeScreen, в котором возникает проблема: 

import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity, StatusBar, 
FlatList, Image } from 'react-native'

import Data from '../data/Data'

class MyListItem extends React.Component {
    render() {
        return(
            <View style={styles.container}>
                <TouchableOpacity
                    onPress={this.props.handleOnPress}
                >
                    <View style={{ flexDirection: 'row', heigth: 100, width: 100 }}>
                        <View>
                            <Image style={{ height: 50, width: 50, resizeMode: 'contain' }} source={require('../res/icon.png')} />
                        </View>
                        <View style={{ justifyContent: 'center' }}>
                            <Text>
                                {this.props.item.name}
                            </Text>
                        </View>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}



class HomeScreen extends React.Component {

    handleOnPress = () => {
        this.props.navigation.navigate('Details')
    }

    render() {
        return (
            <View>
                <StatusBar hidden={true} />
                <TouchableOpacity
                    onPress={() => this.props.navigation.navigate('Details')}
                >
                    <Text>Test</Text>
                </TouchableOpacity>
                <FlatList
                    data={Data}
                    renderItem={({ item }) =>
                        <MyListItem 
                            item={item}
                            onPress={this.handleOnPress}
                        />
                    }
                />
            </View>
        );
    }
}


export default HomeScreen;

PS: я запускаю код на эмуляторе Android.

Редактировать: отредактировано предложение ответа в код

1 Ответ

0 голосов
/ 03 ноября 2018

Может быть опечатка, но вы пытаетесь перейти к navigate('Details'), когда вы объявили свой экран как Detail

{
  Home: HomeScreen,
  Detail: DetailScreen, <----
},
...