单击卡组件时，如何转到另一个页面？ -反应本地

问题描述

我的主页中有一个Card组件，每当用户单击Card时，我都希望他们被定向到Content.js页面，该页面将显示每张Card的内容。 出于某种原因，我在导航方面遇到了困难。

经过大量研究，我决定为此使用TouchableOpacity和onPress，但是我收到一条错误消息，说“ 带有有效载荷{“ name”：“ Content”}的动作'NAVIGATE'未被任何导航器处理。”

import React,{ Component } from "react";
import { StyleSheet,Text,View,FlatList } from 'react-native';
import {AppleCard,AppOfTheDayCard} from 'react-native-apple-card-views';
import firebase from '../../Firebase';
import { TouchableOpacity } from "react-native-gesture-handler";
import Content from './Content';

export default class HomeFeed extends Component {
constructor(props) {
  super(props);
    this.ref = firebase.firestore().collection('articles');
    this.unsubscribe = null;
    this.state = {
      articles: []
    };
}

onCollectionUpdate = (querySnapshot) => {
  const articles = [];
  querySnapshot.forEach((doc) => {
    const { title,content } = doc.data();
    articles.push({
      key: doc.id,doc,// DocumentSnapshot
      title
    });
  });
  this.setState({
    articles
 });
}

componentDidMount() {
  this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
}

 _OnPressButton = () => {
   this.props.navigation.navigate("Content");
 };

// https://github.com/WrathChaos/react-native-apple-card-views
renderItem = ({ item }) => {
  return (
    <View>
    <View style={styles.card}>
    <TouchableOpacity onPress= {this._OnPressButton}>
    <AppleCard
    largeTitle={item.title}
    smallTitle=""
    footnoteText="subtitle placeholder"
    >
    </AppleCard>
    </TouchableOpacity>
      </View>
    </View>
  )
}

  render() {

return(
    <View style={styles.homeFeed}>
      <FlatList
        data={this.state.articles}
        renderItem={this.renderItem}
      />
      
    </View>
);
  }

}
const styles = StyleSheet.create({
  homeFeed: {
    flex: 1,backgroundColor: '#fff',alignItems: 'center',justifyContent: 'center'
  },card: {
    padding: 15
  }
  
});

除此之外，在我的app.js中，我有以下代码，该代码基本上是bottomNavNavigation。我不知道这是否相关。

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function Tabroutes() {
  return (
    <Tab.Navigator
      screenoptions={({route}) => ({
        tabBarIcon: ({focused,color,size}) => {
          let iconName;

          if (route.name === 'HomeFeed') {
            iconName = focused ? 'home' : 'home';
          } else if (route.name === 'Community') {
            iconName = focused ? 'users' : 'users';
          } else if (route.name === 'Therapist') {
            iconName = focused ? 'heart' : 'heart';
          } else if (route.name === 'Chat') {
            iconName = focused ? 'comments' : 'comments';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'cog' : 'cog';
          }

          // You can return any component that you like here!
          return <Icon name={iconName} size={size} color={color} />;
        },})}
      tabBarOptions={{
        activeTintColor: 'tomato',inactiveTintColor: 'gray',}}>
      <Tab.Screen name="HomeFeed" component={HomeFeed} />
      <Tab.Screen name="Community" component={Community} />
      <Tab.Screen name="Therapist" component={Therapist} />
      <Tab.Screen name="Chat" component={Chat} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Tabroutes />
    </NavigationContainer>
  );
}

export default App;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）