如何解决单击卡组件时,如何转到另一个页面? -反应本地
我的主页中有一个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 举报,一经查实,本站将立刻删除。