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

Question

У меня возникла проблема с переходом из плоского списка API на отдельный экран. У меня есть интегрированный API новостей, и я хочу, чтобы из каждой статьи отображался переход на экран новостей. Я не получаю сообщение об ошибке, только не работает сенсорная прозрачность. Я не уверен, где я допустил ошибку в плоском списке или в приложении. js

FlatList:

import React, { Component } from 'react';
import { FlatList, TouchableOpacity } from 'react-native';


import { getUSANews } from './fetchNews';
import Article from './Article';
import NewsDetail from '../screens/NewsDetail';

class News extends Component {
 state = {
 articles: [],
 refreshing: true
};

componentDidMount = () => {
  this.fetchNews();
};

fetchNews = () => {
  getUSANews()
  .then(articles => {
    this.setState({ articles, refreshing: false });
  })
  .catch(() => this.setState({ refreshing: false }));
};

handleRefresh = () => {
this.setState({ refreshing: true }, () => this.fetchNews());
};

render(navigation) {
 return (
  <FlatList
    data={this.state.articles}
    keyExtractor={item => item.url}
    refreshing={this.state.refreshing}
    onRefresh={this.handleRefresh}
    renderItem ={({item}) => {
      return (
      <TouchableOpacity onPress={() => this.props.navigation.navigate('NewsDetail')}
      >
      <Article article={item} />
      </TouchableOpacity>
      );
  }} 
  />
);
}
}

export default News;

Приложение. js:

 const Drawer = createDrawerNavigator(
  {
  Home: { 
    screen: homeScreen,
    Options: {
      title: 'Home',
      activeTintColor: 'red'
    },
  },
  Signin:{ 
    screen: SigninScreen,
    Options: {
      title: "Sign In",

    },
  },
  Signup: {
    screen: SignupScreen,
    navigationOptions: {
    title: 'Sign Up'
    }
  }
},

{
  initialRouteName: 'Home',
  unmountInactiveRoutes: true,
  headerMode: 'none',
  contentOptions: {
    activeTintColor: 'red'
  },

},


);

const AppNavigator = createStackNavigator({
    Drawer: {
      screen: Drawer,
      navigationOptions: ({ navigation }) => {
        return {
          headerTitle: "Home",
          headerTitleStyle: {
            color: "white"
          },
          headerStyle: {
            backgroundColor: "#5BBC9D"
          },
          headerLeft: (
            <Icon
              onPress={() => navigation.openDrawer()}
              name="md-menu"
              color="white"
              size={30}
              style={{
              paddingLeft: 10
              }}
            />

          ),
          headerRight: (
            <Icon
              onPress={() => navigation.se()}
              name="ios-search"
              color="white"
              size={30}
              style={{
                paddingRight: 10
              }}
            />
          )
        }
      }},
      Detail: {
        screen:NewsDetail
      }
  })





const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render (){

    return(
      <AppContainer />
    );
  }
}

Answer 1

Вы устанавливаете RouteName на экран newsDetail как Detail . Следовательно, чтобы перейти к этому экрану, вам нужно использовать заданное вами RouteName, а не имя экрана. Пожалуйста, измените с

onPress={() => this.props.navigation.navigate('NewsDetail')}

на

onPress={() => this.props.navigation.navigate('Detail')}

Answer 2

У вас нет псевдонима NewsDetail измените это:

onPress={() => this.props.navigation.navigate('NewsDetail')}

на

onPress={() => this.props.navigation.navigate('Detail')}

Надеюсь, это поможет!