Question

我需要将当前活动幻灯片的详细信息传递给另一个js文件。我怎么能这样做（有8张幻灯片）？

我需要传递的详细信息是幻灯片的名称和索引，

这是我的carousel js文件：

＆＃13;

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;

＆＃13;

以下是我需要使用这些详细信息的文件之一

＆＃13;

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;

＆＃13;

我已经尝试过使用状态和道具来做这件事，并且还使用了像currentIndex这样的吸气剂使用旋转木马的参考但是无法获得细节

Answer 1

我正在使用这个

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 });
}} />

Answer 2

如何为<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>
        );
    }
}

如何使用react-native-snap-carousel获取并传递活动幻灯片的详细信息

2 个答案: