fetch, Swiper, ActivityIndicator, Dimensions, BlurView, Scrollview
import styled from 'styled-components/native'
import Swiper from 'react-native-web-swiper'
import { NativeStackScreenProps } from '@react-navigation/native-stack'
import { ActivityIndicator, Dimensions } from 'react-native'
import { makeImgPath } from '../util'
import { BlurView } from 'expo-blur'
const API_KEY = '86d6efd228f2052ac88a791925717fc9'
const Container = styled.ScrollView``
const View = styled.View`
flex: 1;
`
const Loader = styled.View`
flex: 1;
justify-content: center;
align-items: center;
`
const BgImg = styled.Image`
width: 100%;
height: 100%;
position: absolute;
`
const Title = styled.Text`
font-size: 25;
color: white;
`
const { height: SCREEN_HEIGHT } = Dimensions.get('window')
const Movies: React.FC<NativeStackScreenProps<any, 'Movies'>> = () => {
const [loading, setLoading] = useState(true)
const [nowPlaying, setNowPlaying] = useState([])
const getNowPlaying = async () => {
const { results } = await (
await fetch(
`https://api.themoviedb.org/3/movie/now_playing?api_key=${API_KEY}&language=en-US&page=1®ion=KR`
)
).json()
setNowPlaying(results)
setLoading(false)
}
useEffect(() => {
getNowPlaying()
})
return loading ? (
<Loader>
<ActivityIndicator color="black" size="large" />
</Loader>
) : (
<Container>
<Swiper
loop
timeout={2}
controlsEnabled={false}
containerStyle={{ width: '100%', height: SCREEN_HEIGHT / 4 }}
>
{nowPlaying.map((movie) => (
<View
key={movie.id}
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
>
<BgImg source={{ uri: makeImgPath(movie.backdrop_path) }} />
<BlurView>
<Title>{movie.original_title}</Title>
</BlurView>
</View>
))}
</Swiper>
</Container>
)
}
export default Movies
fetch,
Swiper,
ActivityIndicator,
Dimensions,
BlurView,
Scrollview
Movies 함수의 type
다 확인해볼것!!!!!
Author And Source
이 문제에 관하여(fetch, Swiper, ActivityIndicator, Dimensions, BlurView, Scrollview), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jinyinshu/fetch-Swiper-ActivityIndicator-Dimensions-BlurView-Scrollview저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)