如何在react-native中有两个居中和可点击的图像链接

npm install react-native-elements react-native-vector-icons

import React from 'react';
import { View } from 'react-native';
import { Icon, Image, Button } from 'react-native-elements';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useNavigation } from '@react-navigation/native';

const CenteredClickableImages = () => {
  const navigation = useNavigation();

  const handleImageClick = (imageIndex) => {
    // 处理图像点击事件
    // 可以根据需要进行页面导航或其他操作
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={() => handleImageClick(1)}>
        <Image
          source={require('./path/to/first/image.png')}
          style={{ width: 200, height: 200 }}
        />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => handleImageClick(2)}>
        <Image
          source={require('./path/to/second/image.png')}
          style={{ width: 200, height: 200 }}
        />
      </TouchableOpacity>
    </View>
  );
};

export default CenteredClickableImages;

import React from 'react';
import { View } from 'react-native';
import CenteredClickableImages from './CenteredClickableImages';

const MyPage = () => {
  return (
    <View style={{ flex: 1 }}>
      {/* 其他页面内容 */}
      <CenteredClickableImages />
      {/* 其他页面内容 */}
    </View>
  );
};

export default MyPage;