javascript - 反应本机滑动手势

Question

我是新手反应原生并试图学习滑动手势。

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

问题：我似乎无法弄清楚我应该如何渲染一部新电影。这是我的电影组件。

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 MovieScreen = () => {
  const onLeftAction = () => {
    return <Movie />;
  };

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

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

export default MovieScreen;

我想要做的是在向右或向左滑动时重新渲染电影组件。

我尝试将此作为测试，但它似乎不是正确的方法。

return <Movie />;

请stackoverflow专业人士帮帮我！:D

另外，如果您需要更多信息，请询问，我会提供！

提前致谢！

标签： javascriptreactjsreact-native