如何獲取並傳遞活動幻燈片的詳細信息反應本機使用react-native-snap-carousel

總共有8張幻燈片，我需要將當前活動幻燈片的詳細信息傳遞給其他js文件我能做到這一點如何獲取並傳遞活動幻燈片的詳細信息反應本機使用react-native-snap-carousel

，我需要傳遞的是幻燈片的名稱和索引的細節，

這裏是我的旋轉木馬js文件：

import React, { Component } from 'react'; 
 
import { Dimensions, View, Image } from 'react-native'; 
 
import Carousel from 'react-native-snap-carousel'; 
 

 
const { height, width } = Dimensions.get('window'); 
 

 
class TeamScroll extends Component { 
 

 
    render() { 
 
    return (
 
     <View > 
 
     <View style={{ transform: [{ rotate: '-14deg' }] }}> 
 
     <Carousel 
 
     ref={(c) => { this.props.carouselRef = c; }} 
 
     inactiveSlideOpacity={0.6} 
 
     inactiveSlideScale={0.65} 
 
     firstItem={1} 
 
     sliderWidth={width} 
 
     itemWidth={width/3} > 
 
     <Image 
 
     source={require('./Images/logo-chepauk.png')} 
 
     style={styles.logoStyle} /> 
 
     <Image 
 
     source={require('./Images/logo-dindigul.png')} 
 
     style={styles.logoStyle} /> 
 
     <Image 
 
     source={require('./Images/logo-kanchi.png')} 
 
     style={styles.logoStyle} /> 
 
     <Image 
 
     source={require('./Images/logo-karaikudi.png')} 
 
     style={styles.logoStyle} /> 
 
     <Image 
 
     source={require('./Images/logo-kovai.png')} 
 
     style={styles.logoStyle} /> 
 
     <Image 
 
     source={require('./Images/logomadurai.png')} 
 
     style={styles.logoStyle} /> 
 
     <Image 
 
     source={require('./Images/logothiruvallur.png')} 
 
     style={styles.logoStyle} /> 
 
     <Image 
 
     source={require('./Images/logotuti.png')} 
 
     style={styles.logoStyle} /> 
 
     </Carousel> 
 
     </View> 
 
     </View> 
 
); 
 
} 
 
} 
 
const styles = { 
 
    logoStyle: { 
 
    transform: [{ rotate: '14deg' }], 
 
    width: width/3, 
 
    height: width/3 
 
    } 
 
}; 
 
export default TeamScroll;

這裏就是我需要使用這些細節

import React, { Component } from 'react'; 
 
import { Image, Text, View, TouchableWithoutFeedback, Animated, Dimensions } from 'react-native'; 
 
import { Actions } from 'react-native-router-flux'; 
 
import TeamScroll from './TeamScroll'; 
 

 
const a = require('./Images/over3_selected.png'); 
 
const b = require('./Images/over3.png'); 
 
const c = require('./Images/over5_selected.png'); 
 
const d = require('./Images/over5.png'); 
 
const e = require('./Images/over10_selected.png'); 
 
const f = require('./Images/over10.png'); 
 

 
const Sound = require('react-native-sound'); 
 

 
const btnSound = new Sound('btn_sound.mp3', Sound.MAIN_BUNDLE); 
 

 
const w = Dimensions.get('window').width; 
 
const h = Dimensions.get('window').height; 
 

 

 
class ChallengeScreen extends Component { 
 
    state = { 
 
    threePressed: false, 
 
    fivePressed: false, 
 
    tenPressed: false, 
 
    } 
 
    componentWillMount() { 
 
    this.slide1 = new Animated.Value(0); 
 
    this.slide2 = new Animated.Value(0); 
 
    this.slide3 = new Animated.Value(0); 
 

 
    this.ball1(); 
 
    this.ball2(); 
 
    this.ball3(); 
 
    } 
 
ball1() { 
 
Animated.timing(
 
this.slide1, { 
 
delay: 100, 
 
toValue: -(w/2.57), 
 
duration: 700, 
 
} 
 
).start(); 
 
} 
 

 
ball2() { 
 
Animated.timing(
 
this.slide2, { 
 
delay: 200, 
 
toValue: -(w/2.25), 
 
duration: 900, 
 
} 
 
).start(); 
 
} 
 
ball3() { 
 
Animated.timing(
 
    this.slide3, { 
 
delay: 300, 
 
toValue: -(w/2), 
 
duration: 1100, 
 
} 
 
).start(); 
 
} 
 

 

 
    render() { 
 
    return (
 
<Image 
 
    source={require('./Images/bg_inner.png')} style={styles.backgroundStyle}> 
 

 
    <Text style={styles.chooseteamtextStyle}> 
 
    CHOOSE YOUR TEAM 
 
    </Text> 
 
    <Image source={require('./Images/team-logo-band.png')} style={styles.band1Style}> 
 
    <TeamScroll carouselRef /> 
 
    </Image> 
 

 
    <Text style={styles.opponentStyle}> 
 
    YOUR OPPONENT 
 
    </Text> 
 
    <Image source={require('./Images/team-logo-band.png')} style={styles.band2Style}> 
 
    <TeamScroll carouselRef /> 
 
    </Image> 
 

 
    <Text style={styles.overstextStyle}> 
 
    OVERS 
 
    </Text> 
 
    <View style={styles.viewStyle}> 
 

 
    <TouchableWithoutFeedback 
 
    onPress={() => { 
 
     btnSound.play(); 
 
     playFunc(3, this.props.challenge); } 
 
    } 
 
    onPressIn={() => { 
 
     this.setState({ threePressed: true }); 
 
    }} 
 
    onPressOut={() => { 
 
     this.setState({ threePressed: false }); 
 
    }} 
 
    > 
 
    <Animated.Image source={this.state.threePressed ? a : b} 
 
    style={[styles.over3Style, { transform: [{ translateY: this.slide1 }] }]} /> 
 
    </ TouchableWithoutFeedback> 
 

 
    <TouchableWithoutFeedback 
 
    onPress={() => { 
 
     btnSound.play(); 
 
     playFunc(5, this.props.challenge); } 
 
    } 
 
    onPressIn={() => { 
 
     this.setState({ fivePressed: true }); 
 
    }} 
 
    onPressOut={() => { 
 
     this.setState({ fivePressed: false }); 
 
    }}> 
 
    <Animated.Image source={this.state.fivePressed ? c : d} 
 
    style={[styles.over5Style, { transform: [{ translateY: this.slide2 }] }]} /> 
 
</ TouchableWithoutFeedback> 
 

 
    <TouchableWithoutFeedback 
 
    onPress={() => { 
 
     btnSound.play(); 
 
     playFunc(10, this.props.challenge); } 
 
    } 
 
    onPressIn={() => { 
 
     this.setState({ tenPressed: true }); 
 
    }} 
 
    onPressOut={() => { 
 
     this.setState({ tenPressed: false }); 
 
    }}> 
 
    <Animated.Image source={this.state.tenPressed ? e : f} 
 
    style={[styles.over10Style, { transform: [{ translateY: this.slide3 }] }]} /> 
 
    </ TouchableWithoutFeedback> 
 

 
    </View> 
 
</ Image> 
 
); 
 
} 
 
} 
 
function playFunc(num, param) { 
 
if (num === 3 && param === 'Computer') { 
 
    Actions.screen4({ balls: 18 }); 
 
    
 
} 
 
else if (num === 5 && param === 'Computer') { 
 
    Actions.screen4({ balls: 30 }); 
 
} 
 
else if (num === 10 && param === 'Computer') { 
 
    Actions.screen4({ balls: 60 }); 
 
} 
 
else if (num === 3 && param === 'Team') { 
 
    Actions.screen3({ balls: 18 }); 
 
} 
 
else if (num === 5 && param === 'Team') { 
 
    Actions.screen3({ balls: 30 }); 
 
    } 
 
else if (num === 10 && param === 'Team') { 
 
    Actions.screen3({ balls: 60 }); 
 
} 
 
} 
 
const styles = { 
 
    viewStyle: { 
 

 
    flexDirection: 'row', 
 
    justifyContent: 'flex-start' 
 
    }, 
 
backgroundStyle: { 
 
    flex: 1, 
 
    width: w, 
 
    height: h, 
 
    flexWrap: 'wrap', 
 

 
}, 
 
chooseteamtextStyle: { 
 
textAlign: 'center', 
 
    marginTop: h/6.57, 
 
    fontSize: 22, 
 
    color: 'white', 
 
    fontFamily: 'Switzerland-Cond-Black-Italic', 
 
    transform: [{ rotate: '-14deg' }] 
 
}, 
 
band1Style: { 
 
resizeMode: 'stretch', 
 
width: (w/0.947), 
 
height: (h/3.93), 
 
}, 
 
opponentStyle: { 
 
    textAlign: 'center', 
 
    marginTop: -(h/59.2), 
 
    fontSize: 22, 
 
    color: 'white', 
 
    fontFamily: 'Switzerland-Cond-Black-Italic', 
 
    transform: [{ rotate: '-15deg' }] 
 
}, 
 
band2Style: { 
 
resizeMode: 'stretch', 
 
width: (w/0.947), 
 
height: (h/4), 
 
}, 
 
overstextStyle: { 
 
    textAlign: 'center', 
 
    bottom: (h/59.2), 
 
    fontSize: 22, 
 
    color: 'white', 
 
    fontFamily: 'Switzerland-Cond-Black-Italic', 
 
    transform: [{ rotate: '-15deg' }] 
 
}, 
 
over3Style: { 
 
    flexDirection: 'row', 
 
alignItems: 'flex-start', 
 
width: (w/4.5), 
 
height: (h/7.4), 
 
top: (h/3.482), 
 
left: (w/5.142), 
 
}, 
 
over5Style: { 
 
    flexDirection: 'row', 
 
alignItems: 'center', 
 
width: (w/4.5), 
 
height: (h/7.4), 
 
bottom: -(h/3.48), 
 
left: (h/8.45) 
 
}, 
 
over10Style: { 
 
    flexDirection: 'row', 
 
alignItems: 'flex-end', 
 
width: (w/4.5), 
 
height: (h/7.4), 
 
top: (h/3.48), 
 
right: -(w/5.42) 
 
} 
 
}; 
 
export default ChallengeScreen;

我一直在使用狀態嘗試和道具用做它，並且還使用干將像CURRENTINDEX的文件之一旋轉木馬的參考，但無法得到detials

來源

2017-09-01 Adarsh Sreeram

你有沒有考慮落實[終極版]（http://redux.js.org/）？它可以讓你管理你的應用程序的狀態，並可以做你的問題的奇蹟。我們與轉盤和另一個需要了解當前活動項目的組件類似使用。這是IBM的[優秀教程]（https://www.ibm.com/developerworks/library/wa-manage-state-with-redux-p1-david-geary/index.html）和[視頻課程] （https://egghead.io/courses/getting-started-with-redux）由egghead.io – bend

謝謝，但我想完成應用程序沒有REDX –

約增加專用道具<TeamScroll />什麼？

TeamScroll.js

class TeamScroll extends Component { 

    static propTypes = { 
     snapCallback: PropTypes.func 
    } 

    static defaultProps = { 
     snapCallback:() => {} 
    } 

    constructor (props) { 
     super(props); 
     this._onSnapToItem = this._onSnapToItem.bind(this); 
    } 

    _onSnapToItem (index) { 
     this.props.snapCallback(index, this.state.customData); 
    } 

    render() { 
     return (
      <View > 
       <View style={{ transform: [{ rotate: '-14deg' }] }}> 
        <Carousel onSnapToItem={this._onSnapToItem}> 
         // images 
        </Carousel> 
       </View> 
      </View> 
     ); 
    } 
}

ChallengeScreen.js

class ChallengeScreen extends Component { 

    onSnap (index, data) { 
     console.log('CAROUSEL INDEX', { index, data }); 
    } 

    render() { 
     return (
      <Image source={require('./Images/team-logo-band.png')} style={styles.band2Style}> 
       <TeamScroll carouselRef snapCallback={onSnap} /> 
      </Image> 
     ); 
    } 
}

來源

2017-09-01 08:17:46 bend

是'靜態propTypes = { snapCallback：PropTypes.func } 靜態defaultProps = { snapCallback：（）=> {} }'正在使用 –

'propTypes'允許[類型檢查（ https://facebook.github.io/react/docs/typechecking-with-proptypes.html）用於'snapCallback'，而'defaultProps'允許[設置默認值爲道具]（https://facebook.github.io/react/docs/react-component。html＃defaultprops），以確保如果沒有'snapCallback'prop傳遞給組件，就不會遇到錯誤。爲了傳遞你的自定義數據，需要'snapCallback'，否則'ChallengeScreen'中的'onSnap'只會接收'index'參數。 – bend

請注意，您需要將'_onSnapToItem'中的'this.state.customData'替換爲'ChallengeScreen'中需要來自''的任何數據。 – bend

我使用這個

class TeamScroll extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     currentIndex: 0, 
    }; 
    } 

    changePage(nextIndex, isLast) { 
    this.setState({ currentIndex: nextIndex }); 
    this.props.onChangePage(nextIndex + 1, isLast); 
    } 

    render() { 
    return (
     <Page> 
     <Carousel 
      ref={(carousel) => { this.carousel = carousel; }} 
      firstItem={this.state.currentIndex} 
      onSnapToItem={(index) => this.changePage(index, index === screens.length - 1)} 
      data={screens} 
      renderItem={this.renderCarouselItem} 
     /> 
    ); 
    } 
}

請注意，我用了3版中引入的新語法，但它的工作原理，以及在版本2

類有onChangePage道具，當你捕捉到另一個項目時調用。

您可以使用onChangePage與

<TeamScroll onChangePage={(pageIndex, isLastPage) => { 
    // do something here, maybe 
    this.setState({ currentPage: pageIndex }); 
}} />

來源

2017-09-01 04:52:48

謝謝，但我們如何才能訪問'onChangePage'在另一個班，我們使用''爲什麼 –

如何獲取並傳遞活動幻燈片的詳細信息反應本機使用react-native-snap-carousel

回答

相關問題