我是本机反应的新手,正在尝试学习滑动手势。
想法:我的项目是一个基于电影的应用程序,它从数据库中随机选择一部电影,您应该能够向右或向左滑动以渲染新电影。
问题:我似乎不知道应该如何渲染一部新电影。 这是我的电影组件。
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
此外,如果您需要更多信息,请询问,我会提供!
提前致谢!