问题描述
我正在尝试实现一个卡片轮播，这几乎是 React-Native-Snap-Carousel 提供的示例，我开始关注 Implementing Navigation，但我遇到了困难。
我收到错误“未定义不是对象”
代码
SliderEntry.js
import React,{ Component } from 'react';
import { View,Text,Image,TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import { ParallaxImage } from 'react-native-snap-carousel';
import styles from '../styles/SliderEntry.style';
import { StackNavigator,NavigationActions,TabNavigator } from 'react-navigation';
function DetailsScreen() {
return (
<View style={{ flex: 1,alignItems: 'center',justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
export default class SliderEntry extends Component {
static propTypes = {
data: PropTypes.object.isrequired,even: PropTypes.bool,parallax: PropTypes.bool,parallaxProps: PropTypes.object
};
get image () {
const { data: { illustration },parallax,parallaxProps,even } = this.props;
return parallax ? (
<ParallaxImage
source={{ uri: illustration }}
containerStyle={[styles.imageContainer,even ? styles.imageContainerEven : {}]}
style={styles.image}
parallaxFactor={0.35}
showSpinner={true}
spinnerColor={even ? 'rgba(255,255,0.4)' : 'rgba(0,0.25)'}
{...parallaxProps}
/>
) : (
<Image
source={{ uri: illustration }}
style={styles.image}
/>
);
}
render () {
const { data: { title,subtitle,illustration },navigation,even } = this.props;
const uppercaseTitle = title ? (
<Text
style={[styles.title,even ? styles.titleEven : {}]}
numberOfLines={2}
>
{ title.toupperCase() }
</Text>
) : false;
return (
<TouchableOpacity
activeOpacity={1}
style={styles.slideInnerContainer}
onPress={() => navigation.navigate('DetailsScreen')}
>
<View style={styles.shadow} />
<View style={[styles.imageContainer,even ? styles.imageContainerEven : {}]}>
{ this.image }
<View style={[styles.radiusMask,even ? styles.radiusMaskEven : {}]} />
</View>
<View style={[styles.textContainer,even ? styles.textContainerEven : {}]}>
{ uppercaseTitle }
<Text
style={[styles.subtitle,even ? styles.subtitleEven : {}]}
numberOfLines={2}
>
{ subtitle }
</Text>
</View>
</TouchableOpacity>
);
}
}
Index.js
import React,{ Component } from 'react';
import { Platform,View,ScrollView,StatusBar,SafeAreaView,Button } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Carousel,{ Pagination } from 'react-native-snap-carousel';
import { sliderWidth,itemWidth } from './styles/SliderEntry.style';
import SliderEntry from './components/SliderEntry';
import styles,{ colors } from './styles/index.style';
import { ENTRIES1,ENTRIES2 } from './static/entries';
import { scrollInterpolators,animatedStyles } from './utils/animations';
const IS_ANDROID = Platform.OS === 'android';
const SLIDER_1_FirsT_ITEM = 1;
const Stack = createStackNavigator();
export default class CarouselPage extends Component {
constructor (props) {
super(props);
this.state = {
slider1ActiveSlide: SLIDER_1_FirsT_ITEM
};
}
_renderItem ({item,index}) {
return <SliderEntry data={item} even={(index + 1) % 2 === 0} />;
}
_renderItemWithParallax ({item,index},parallaxProps) {
return (
<SliderEntry
data={item}
even={(index + 1) % 2 === 0}
parallax={true}
parallaxProps={parallaxProps}
navigation={this.props.navigation}
/>
);
}
DetailsScreen() {
return (
<View style={{ flex: 1,justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
mainExample (number,title) {
const { slider1ActiveSlide } = this.state;
return (
// <SafeAreaView style={styles.safeArea}>
<View style={styles.exampleContainer}>
<Text style={styles.title}>{`Chapters`}</Text>
<Text style={styles.subtitle}>{title}</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
<Carousel
ref={c => this._slider1Ref = c}
data={ENTRIES1}
renderItem={this._renderItemWithParallax.bind(this)}
sliderWidth={sliderWidth}
itemWidth={itemWidth}
hasParallaxImages={true}
firstItem={SLIDER_1_FirsT_ITEM}
inactiveSlideScale={0.94}
inactiveSlideOpacity={0.7}
// inactiveSlideShift={20}
containerCustomStyle={styles.slider}
contentContainerCustomStyle={styles.sliderContentContainer}
loop={true}
loopClonesPerSide={2}
autoplay={true}
autoplayDelay={500}
autoplayInterval={3000}
onSnapToItem={(index) => this.setState({ slider1ActiveSlide: index }) }
/>
<Pagination
dotsLength={ENTRIES1.length}
activeDotIndex={slider1ActiveSlide}
containerStyle={styles.paginationContainer}
dotColor={'rgba(255,0.92)'}
dotStyle={styles.paginationDot}
inactiveDotColor={colors.black}
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
carouselRef={this._slider1Ref}
tappableDots={!!this._slider1Ref}
/>
</View>
// </SafeAreaView>
);
}
momentumExample (number,title) {
return (
// <SafeAreaView style={styles.safeArea}>
<View style={styles.exampleContainer}>
<Text style={styles.title}>{`Quizzes`}</Text>
<Text style={styles.subtitle}>{title}</Text>
<Carousel
data={ENTRIES2}
renderItem={this._renderItem}
sliderWidth={sliderWidth}
itemWidth={itemWidth}
inactiveSlideScale={0.95}
inactiveSlideOpacity={1}
enableMomentum={true}
activeSlideAlignment={'start'}
containerCustomStyle={styles.slider}
contentContainerCustomStyle={styles.sliderContentContainer}
activeAnimationType={'spring'}
activeAnimationoptions={{
friction: 4,tension: 40
}}
/>
</View>
// </SafeAreaView>
);
}
get gradient () {
return (
<LinearGradient
colors={[colors.background1,colors.background2]}
startPoint={{ x: 1,y: 0 }}
endPoint={{ x: 0,y: 1 }}
style={styles.gradient}
/>
);
}
render() {
const example1 = this.mainExample(1,'XX Default layout | Loop | Autoplay | Parallax | Scale | Opacity | Pagination with tappable dots');
const example2 = this.momentumExample(2,'Momentum | Left-aligned | Active animation');
return (
<SafeAreaView style={styles.safeArea}>
<View style={styles.container}>
<StatusBar
translucent={true}
backgroundColor={'rgba(0,0.3)'}
barStyle={'light-content'}
/>
{ this.gradient }
<ScrollView
style={styles.scrollview}
scrollEventThrottle={200}
directionalLockEnabled={true}
>
{ example1 }
{ example2 }
</ScrollView>
</View>
</SafeAreaView>
)
}
}
目标：
我的最终目标是拥有一个基本的卡片轮播列表，点击后会打开一个屏幕，将每张卡片的数据传递到下一个屏幕。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）