Question

我是本机反应的新手，尝试在屏幕之间导航。我制作了两个组件：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);

Answer 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产品列表中的onPress更改为您在App.js中定义的产品

反应本地堆栈导航按钮onpress不起作用

1 个答案: