反应本机堆栈导航按钮 onpress 不起作用答案

【问题标题】：react native stack navigation button onpress not working反应本机堆栈导航按钮 onpress 不起作用
【发布时间】：2020-07-26 16:32:38
【问题描述】：

我是 React Native 的新手，并试图在屏幕之间导航。我制作了两个组件：Home.js 和 Product.js。在 App.js 中，我尝试展示主页。主屏幕上有一个按钮，但是当我单击该按钮时，它没有响应。点击按钮后我想去productList。

home.js：

import React from 'react';
import { StyleSheet, View,  Text, Button,ScrollView} from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class Home extends  React.Component{

    render(){

        return(
            <ScrollView>
                 <View>
                     <Button
                      title="Go to About"
                      onPress={() => this.props.navigation.navigate('ProductList')}
                     />
                 </View>
            </ScrollView>
        )
    }
}

export default Home;

ProductList.js：

import React from 'react';
import { StyleSheet,Text,View,Image,ScrollView,AppRegistry,FlatList,Button } from 'react-native';
import ProductImages from './ProductImages';

class ProductList extends  React.Component{
    render(){
        return(
        <View>
             <Text>Product List</Text>         
            </View>

        );
    }
}
export default ProductList;

App.js：

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from './components/Home';
import ProductList from './components/ProductList';

class App extends  React.Component{
     render(){
        return <AppContainer  />;
    }
}
const AppNavigator = createStackNavigator({
  Home: {
    screen: Home,
  },
  Product: {
      screen: ProductList
   },
});

export default AppContainer  = createAppContainer(AppNavigator);

【问题讨论】：

标签： react-native

【解决方案1】：

import React from "react";
import { StyleSheet, View, Text, Button, ScrollView } from "react-native";

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
class Home extends React.Component {
  render() {
    return (
      <ScrollView>
        <View>
          <Button
            title="Go to About"
            onPress={() => this.props.navigation.navigate("Product")}
          />
        </View>
      </ScrollView>
    );
  }
}

export default Home;

将 Home.js ProductList 中的 onPress 更改为您在 App.js 中定义的 Product

【讨论】：