仅适用于卡片交换器React-Native

时间:2019-08-03 22:44:06

标签: javascript android reactjs react-native

我正在使用“ react-native-deck-swiper”。它没有仅用于设置顶部卡片样式的道具。我尝试使用裁判,但没有用。这是我的代码:

const Deck = ({navigation}) => {
  const [currentCard, setCurrentCard] = useState(0);
  let _root = React.createRef();
    return (
        <>
            <Header title='Play' navigation={navigation}/>
            <ImageBackground
                resizeMode='cover'
                style={{flex: 1}}
                source={require('../assets/background-100.jpg')}
            >
                    <Swiper cards={cards} backgroundColor={'transparent'}
                            renderCard={(card, index) => {
                                if(index === 0) {
                                    return <ImageBackground resizeMode='cover'
                                                            style={{flex: 1, borderWidth: 5, borderColor: '#0003', justifyContent: 'center', alignItems: 'center'}}
                                                            source={require('../assets/background-100.jpg')}>
                                        <Text style={styles.tutorialText}>Wischen um zur nächsten Karte zu gelangen</Text>
                                        <Image style={styles.tutorialArrow} source={require('../assets/arrowForCard.png')}/>
                                    </ImageBackground>
                                }
                                return <Card ref={component => _root[index] = component} style={index === currentCard ? {flex: 1, borderWidth: 5, borderColor: '#0003'} : {flex: 1}} card={card} updateDataCard={updatePopup}/>
                            }}
                            stackSize={10}
                            onSwiped={() => {setCurrentCard(currentCard + 1); console.log(currentCard); _root[currentCard].borderColor = '#0003'; _root[currentCard].borderWidth = 5;}}
                            cardStyle={{width: wp('100%'), height: '100%', marginBottom: 0}}
                            cardHorizontalMargin={0}
                            cardVerticalMargin={0}
                    />
            </ImageBackground>
        </>
    )
  };

我的要求是最上面的卡片有边框。我该怎么做?使用引用是否正确?

0 个答案:

没有答案