如何從項目列表中選擇滾動視圖中的中心項目

我在兩個滾動視圖中的應用程序中都有2個滾動視圖我應該選擇每個出現在滾動中心的項目，然後繼續爲我代碼中的下一個活動如何從項目列表中選擇滾動視圖中的中心項目

所以，我怎麼能做到這一點是沒有任何道具，在列表中選擇中心項目

這是我的js文件，該文件顯示2個ScrollViews：

import React, { Component } from 'react'; 
 
import { Image, Text, View, TouchableWithoutFeedback, Animated } 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'); 
 

 
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: -140, 
 
       duration: 700, 
 
      } 
 
      ).start(); 
 
      } 
 

 
     ball2() { 
 
       Animated.timing(
 
        this.slide2, { 
 
        delay: 200, 
 
        toValue: -160, 
 
        duration: 900, 
 
       } 
 
       ).start(); 
 
       } 
 
     ball3() { 
 
        Animated.timing(
 
         this.slide3, { 
 
         delay: 300, 
 
         toValue: -180, 
 
         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 /> 
 
    </Image> 
 

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

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

 
    <TouchableWithoutFeedback 
 
    onPress={() => 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={() => 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={() => 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(); 
 
} 
 
else if (num === 5 && param === 'Computer') { 
 
    Actions.screen4(); 
 
} 
 
else if (num === 10 && param === 'Computer') { 
 
    Actions.screen4(); 
 
} 
 
else if (num === 3 && param === 'Team') { 
 
    Actions.screen3(); 
 
} 
 
else if (num === 5 && param === 'Team') { 
 
    Actions.screen3(); 
 
} 
 
else if (num === 10 && param === 'Team') { 
 
    Actions.screen3(); 
 
} 
 
} 
 
const styles = { 
 
    viewStyle: { 
 

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

 
}, 
 
chooseteamtextStyle: { 
 
textAlign: 'center', 
 
    marginTop: 80, 
 
    fontSize: 20, 
 
    color: 'white', 
 
    fontFamily: 'Switzerland-Cond-Black-Italic', 
 
    transform: [{ rotate: '-14deg' }] 
 
}, 
 
band1Style: { 
 
marginTop: -10, 
 
resizeMode: 'stretch', 
 
width: 380, 
 
height: 150, 
 
}, 
 
opponentStyle: { 
 
    textAlign: 'center', 
 
    marginTop: -10, 
 
    fontSize: 20, 
 
    color: 'white', 
 
    fontFamily: 'Switzerland-Cond-Black-Italic', 
 
    transform: [{ rotate: '-15deg' }] 
 
}, 
 
band2Style: { 
 
resizeMode: 'stretch', 
 
marginTop: -10, 
 
width: 380, 
 
height: 150, 
 
}, 
 
overstextStyle: { 
 
    textAlign: 'center', 
 
    bottom: 10, 
 
    fontSize: 20, 
 
    color: 'white', 
 
    fontFamily: 'Switzerland-Cond-Black-Italic', 
 
    transform: [{ rotate: '-15deg' }] 
 
}, 
 
over3Style: { 
 
    flexDirection: 'row', 
 
alignItems: 'flex-start', 
 
width: 80, 
 
height: 80, 
 
top: 170, 
 
left: 70, 
 
}, 
 
over5Style: { 
 
    flexDirection: 'row', 
 
alignItems: 'center', 
 
width: 80, 
 
height: 80, 
 
bottom: -170, 
 
left: 70 
 
}, 
 
over10Style: { 
 
    flexDirection: 'row', 
 
alignItems: 'flex-end', 
 
width: 80, 
 
height: 80, 
 
top: 170, 
 
right: -70 
 
} 
 
}; 
 
export default ChallengeScreen;

而這正是我已經申請滾動型的js文件：

import React, { Component } from 'react'; 
 
import { Image, Text, View, TouchableWithoutFeedback, Animated } 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'); 
 

 
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: -140, 
 
duration: 700, 
 
} 
 
).start(); 
 
} 
 

 
ball2() { 
 
Animated.timing(
 
this.slide2, { 
 
delay: 200, 
 
toValue: -160, 
 
duration: 900, 
 
} 
 
).start(); 
 
} 
 
ball3() { 
 
Animated.timing(
 
    this.slide3, { 
 
delay: 300, 
 
toValue: -180, 
 
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 /> 
 
    </Image> 
 

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

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

 
    <TouchableWithoutFeedback 
 
    onPress={() => 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={() => 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={() => 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(); 
 
} 
 
else if (num === 5 && param === 'Computer') { 
 
    Actions.screen4(); 
 
} 
 
else if (num === 10 && param === 'Computer') { 
 
    Actions.screen4(); 
 
} 
 
else if (num === 3 && param === 'Team') { 
 
    Actions.screen3(); 
 
} 
 
else if (num === 5 && param === 'Team') { 
 
    Actions.screen3(); 
 
} 
 
else if (num === 10 && param === 'Team') { 
 
    Actions.screen3(); 
 
} 
 
} 
 
const styles = { 
 
    viewStyle: { 
 

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

 
}, 
 
chooseteamtextStyle: { 
 
textAlign: 'center', 
 
    marginTop: 80, 
 
    fontSize: 20, 
 
    color: 'white', 
 
    fontFamily: 'Switzerland-Cond-Black-Italic', 
 
    transform: [{ rotate: '-14deg' }] 
 
}, 
 
band1Style: { 
 
marginTop: -10, 
 
resizeMode: 'stretch', 
 
width: 380, 
 
height: 150, 
 
}, 
 
opponentStyle: { 
 
    textAlign: 'center', 
 
    marginTop: -10, 
 
    fontSize: 20, 
 
    color: 'white', 
 
    fontFamily: 'Switzerland-Cond-Black-Italic', 
 
    transform: [{ rotate: '-15deg' }] 
 
}, 
 
band2Style: { 
 
resizeMode: 'stretch', 
 
marginTop: -10, 
 
width: 380, 
 
height: 150, 
 
}, 
 
overstextStyle: { 
 
    textAlign: 'center', 
 
    bottom: 10, 
 
    fontSize: 20, 
 
    color: 'white', 
 
    fontFamily: 'Switzerland-Cond-Black-Italic', 
 
    transform: [{ rotate: '-15deg' }] 
 
}, 
 
over3Style: { 
 
    flexDirection: 'row', 
 
alignItems: 'flex-start', 
 
width: 80, 
 
height: 80, 
 
top: 170, 
 
left: 70, 
 
}, 
 
over5Style: { 
 
    flexDirection: 'row', 
 
alignItems: 'center', 
 
width: 80, 
 
height: 80, 
 
bottom: -170, 
 
left: 70 
 
}, 
 
over10Style: { 
 
    flexDirection: 'row', 
 
alignItems: 'flex-end', 
 
width: 80, 
 
height: 80, 
 
top: 170, 
 
right: -70 
 
} 
 
}; 
 
export default ChallengeScreen;

TeamScroll.js

import React, { Component } from 'react'; 
 
import { ScrollView, View, Image } from 'react-native'; 
 

 
class TeamScroll extends Component { 
 
    render() { 
 
    return (
 
<ScrollView 
 
horizontal 
 
style={styles.scrollViewStyle} 
 
    showsHorizontalScrollIndicator={false}> 
 
    <View style={styles.viewStyle}> 
 

 
    <View style={styles.cheStyle}> 
 
     <Image 
 
     source={require('./Images/logo-chepauk.png')} 
 
     style={styles.logoStyle} /> 
 
    </View> 
 

 
    <View style={styles.dinStyle}> 
 
     <Image 
 
     source={require('./Images/logo-dindigul.png')} 
 
     style={styles.logoStyle} /> 
 
    </View> 
 

 
    <View style={styles.kanStyle}> 
 
     <Image 
 
     source={require('./Images/logo-kanchi.png')} 
 
     style={styles.logoStyle} /> 
 
    </View> 
 

 
    <View style={styles.karStyle}> 
 
     <Image 
 
     source={require('./Images/logo-karaikudi.png')} 
 
     style={styles.logoStyle} /> 
 
    </View> 
 

 
    <View style={styles.kovStyle}> 
 
     <Image 
 
     source={require('./Images/logo-kovai.png')} 
 
     style={styles.logoStyle} /> 
 
    </View> 
 

 
    <View style={styles.madStyle}> 
 
     <Image 
 
     source={require('./Images/logomadurai.png')} 
 
     style={styles.logoStyle} /> 
 
    </View> 
 

 
    <View style={styles.thiStyle}> 
 
     <Image 
 
     source={require('./Images/logothiruvallur.png')} 
 
     style={styles.logoStyle} /> 
 
    </View> 
 

 
    <View style={styles.tutStyle}> 
 
     <Image 
 
     source={require('./Images/logotuti.png')} 
 
     style={styles.logoStyle} /> 
 
    </View> 
 

 
    </View> 
 
</ScrollView> 
 

 
    ); 
 
    } 
 
} 
 
const styles = { 
 
viewStyle: { 
 
flexDirection: 'row', 
 
justifyContent: 'space-around', 
 
// position: 'relative', 
 
transform: [{ rotate: '-4deg' }] 
 
}, 
 

 
logoStyle: { 
 
    width: 90, 
 
    height: 90, 
 
    position: 'relative', 
 
    marginLeft: 10, 
 
    marginRight: 30, 
 
    marginTop: 20 
 
}, 
 
cheStyle: { 
 
    bottom: 20, 
 
transform: [{ rotate: '16deg' }] 
 
}, 
 
dinStyle: { 
 
    bottom: 15, 
 
    transform: [{ rotate: '16deg' }] 
 
}, 
 
kanStyle: { 
 
    marginTop: -5, 
 
    transform: [{ rotate: '16deg' }] 
 
}, 
 
karStyle: { 
 
    top: 10, 
 
    transform: [{ rotate: '17deg' }] 
 
}, 
 
kovStyle: { 
 
    top: 10, 
 
    transform: [{ rotate: '16deg' }] 
 
}, 
 
madStyle: { 
 
    marginTop: 25, 
 
    transform: [{ rotate: '16deg' }] 
 
}, 
 
thiStyle: { 
 
    marginTop: 35, 
 
    transform: [{ rotate: '16deg' }] 
 
}, 
 
tutStyle: { 
 
    marginTop: 45, 
 
    transform: [{ rotate: '16deg' }] 
 
}, 
 
scrollViewStyle: { 
 
    transform: [{ rotate: '-12deg' }] 
 
} 
 
}; 
 
export default TeamScroll;

來源

2017-08-08 Adarsh Sreeram

可以共享TeamScroll組成部分，也是我的TeamScroll.js文件？ –

@ muhammed basil是的，我已分享它 –

我已經整理出來我遇到了所有的人本身要求我使用的反應機模塊此

react-native-snap-carousel

我能控制顯示在屏幕上的元素的數量，並且還滾動與動畫和我也可以選擇使用每個圖像的索引，我添加

檢查這個約卡旋轉木馬的詳細介紹： https://github.com/archriss/react-native-snap-carousel

我以這只是改變了我的teamscroll成分，我也可以通過一些道具到其他文件在我的應用

這裏是使用捕捉傳送帶

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

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

 
class TeamScroll extends Component { 
 
    render() { 
 
    return (
 
     <View style={{ top: 50, }}> 
 
     <View style={{ transform: [{ rotate: '-12deg' }] }}> 
 
     <Carousel 
 
     inactiveSlideOpacity={0.7} 
 
     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: { 
 
    width: width/3, 
 
    height: width/3 
 
    } 
 
}; 
 
export default TeamScroll;

來源

2017-08-10 11:01:05

如何從項目列表中選擇滾動視圖中的中心項目

回答

相關問題