如何在 React Native 中点击卡片导航到另一个屏幕？

Question

我已经创建了 4 张卡片；每行两个。我已在数组中添加数据。我想做的是，当我单击这些卡片时，我想导航到另一个屏幕，例如，如果我单击 id 1 的卡片，我想转到屏幕 A，然后按照卡片 2、3、4 转到屏幕B、C、D。下面是我的代码。我对 RN 和 Javascript 比较陌生。所以，我不确定如何在这里使用 Switch 语句。

Home.js

import React from 'react';
import {View, Text, Image} from 'react-native';
import styles from './styles/Cardstyle';
import LinearGradient from 'react-native-linear-gradient';

const data = [
{id: 1, title: 'Take a Test', image: require('./images/test.png')},
{id: 2, title: 'Questions', image: require('./images/questions.png')},
{id: 3, title: 'Instagram', image: require('./images/instagram.png')},
{id: 4, title: 'Telegram', image: require('./images/telegram.png')},
];

const Card = ({item}) => {
return (
<View style={styles.card}>
  <Image source={item.image} style={styles.cardImage} />
  <Text style={styles.cardTitle}>{item.title}</Text>
</View>
);
};

function Home() {
return (
<LinearGradient
  colors={['#4c669f', '#3b5998', '#192f6a']}
  start={{x: 0, y: 0}}
  end={{x: 1, y: 1}}
  style={{flex: 1}}>
  <View style={styles.container}>
    <Text style={styles.aboveText}>Select an option</Text>
    <View style={styles.row}>
      {data.map(item => (
        <Card key={item.id} item={item} />
      ))}
    </View>
  </View>
</LinearGradient>
);
}
export default Home;`

下面是样式文件

CardStyle.js

import {StyleSheet} from 'react-native';

import {Dimensions} from 'react-native';

const window = Dimensions.get('window'); // Get screen dimensions

const styles = StyleSheet.create({
container: {
flex: 1, // Make container take all available space
padding: 20, // Add equal padding from all sides
justifyContent: 'center', // Center content vertically
alignItems: 'center',
alignContent: 'center',
backgroundColor: 'transparent',
},
gradientBackground: {
flex: 1,
width: window.width, // Set width to screen width
height: window.height, // Set height to screen height
justifyContent: 'center',
alignItems: 'center',
},
row: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between', // Distribute cards evenly
marginBottom: 5,
},
card: {
width: '45%', // Adjust width based on your needs
height: '45%',
marginBottom: 40,
backgroundColor: '#eeeeee', // Change to your desired background color
borderRadius: 5,
alignItems: 'center',
},
cardImage: {
width: '70%',
height: 100, // Adjust height as needed
resizeMode: 'contain', // Fit image within container
justifyContent: 'center',
marginTop: 60,
},
cardTitle: {
marginTop: 10,
fontSize: 20,
marginBottom: 5,
fontStyle: 'normal',
},
aboveText: {
// Add this style for the above text
fontSize: 20, // Adjust font size as needed
marginBottom: 15,
fontStyle: 'normal',
color: '#ffffff',
},
});

导出默认样式；`

我想将onPressable应用到卡上，但不知道如何在这里使用Switch。

我知道有 4 种不同的情况，我必须使用 Switch 语句，但我不知道如何在这里使用它

Answer 1

要在 React Native 中通过卡片点击导航到不同屏幕，您可以使用

navigation

n 库提供的

react-navigatio

属性。以下是如何实现此目标的简化示例：

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const data = [
  { id: 1, title: 'Screen A', screen: 'ScreenA', image: require('./images/test.png') },
  { id: 2, title: 'Screen B', screen: 'ScreenB', image: require('./images/questions.png') },
  { id: 3, title: 'Screen C', screen: 'ScreenC', image: require('./images/instagram.png') },
  { id: 4, title: 'Screen D', screen: 'ScreenD', image: require('./images/telegram.png') },
];

const Card = ({ item }) => {
  const navigation = useNavigation();

  return (
    <TouchableOpacity
      style={{ /* your styles here */ }}
      onPress={() => navigation.navigate(item.screen)}
    >
      <Image source={item.image} />
      <Text>{item.title}</Text>
    </TouchableOpacity>
  );
};

const Home = () => {
  return (
    <View>
      {data.map(item => (
        <Card key={item.id} item={item} />
      ))}
    </View>
  );
};

export default Home;

在此示例中，每张卡都是一个

TouchableOpacity

，按下时会导航到与该卡关联的屏幕。

screen

数组中的

data

属性对应于导航堆栈中定义的路线名称。

确保您要导航到的屏幕在导航堆栈中正确定义，并且

screen

属性与路线名称完全匹配。

请记住按照

NavigationContainer

文档在应用程序的根目录导入并设置

react-navigation

和堆栈导航器。这只是一个组件示例，假设您已经设置了导航结构。如果您在设置导航堆栈方面需要进一步帮助。