Javascript 反应本机刷卡手势

我是个新手，不会做出本地反应，也不会学刷卡手势

想法：我的项目是一个基于电影的应用程序，它从数据库中随机选择一部电影，你应该能够向右或向左滑动以渲染一部新电影

问题是：我似乎不知道该如何渲染一部新电影。 这是我的电影组件

const Movie = () => {

  const [movie, setMovie] = useState({});

  useEffect(() => {
    const fetchMovie = async () => {
      return fetch(`${uris.fetchTopRated}`)
        .then((res) => res.json())
        .then((data) => {
          const movies = data.results;
          setMovie(movies[Math.floor(Math.random() * movies.length)]);
        })
        .catch((error) => alert(error));
    };
    fetchMovie();
  }, [uris.fetchTopRated]);

  return (
    <Animated.View
      style={{
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Animated.Image
        style={{
          margin: 20,
          width: 350,
          height: 600,
        }}
        source={{
          uri: `${image_base_url}${movie.poster_path}`,
        }}
      />
      <Animated.Text>{movie.title}</Animated.Text>
      <Animated.Text>{movie.overview}</Animated.Text>
    </Animated.View>
  );
};

export default Movie;

const Movie=（）=>{
const[movie，setMovie]=useState（{}）；
useffect（（）=>{
const fetchMovie=async（）=>{
返回fetch（`${uris.fetchTopRated}`）
.然后（（res）=>res.json（））
。然后（（数据）=>{
const movies=data.results；
setMovie（movies[Math.floor（Math.random（）*movies.length）]；
})
.catch（（错误）=>警报（错误））；
};
fetchMovie（）；
}，[uris.fetchTopRated]）；
返回(
{movie.title}
{movie.overview}
);
};
导出默认电影；

这是我的父组件，它应该用一个可滑动的组件来渲染电影组件

const MovieScreen = () => {
  const onLeftAction = () => {
    return <Movie />;
  };

  const onRightAction = () => {
    return <Movie />;
  };

  return (
    <Swipeable
      renderLeftActions={onLeftAction}
      renderRightActions={onRightAction}
    >
      <Movie />
    </Swipeable>
  );
};

export default MovieScreen;

const MovieScreen=（）=>{
const onLeftAction=（）=>{
返回；
};
const onRightAction=（）=>{
返回；
};
返回(
);
};
导出默认电影屏幕；

我想做的是在电影组件被向右或向左滑动时重新播放它

我试着做个测试，但似乎不太对劲

return <Movie />;

返回；

请帮帮我D

此外，如果你需要更多的信息，只要问，我会提供

提前谢谢