我希望登机屏幕上的自定义跳过按钮导航到主屏幕

时间:2019-10-17 18:42:29

标签: react-native react-native-swiper react-swipeable-views

React-native-swiper中没有跳过道具,因此我很难在右上角具有跳过按钮,该按钮将导航到登机屏幕上的最后一个,它将导航至主屏幕应用程序

我试图将所有幻灯片页面放入数组中,并在单击“跳过”按钮时将它们反转,但是它无法按我的意愿工作

export default class SwipperComponent extends Component {
  state = {
    fadeValue: new Animated.Value(0),
    Yvalue: new Animated.Value(300),
    springValue: new Animated.Value(0),
  };
  render() {
 <Swiper
        style={styles.wrapper}
        index={this.state.swiperIndex}
        dot={
          <View
            style={{
              backgroundColor: 'rgba(0,0,0,.2)',
              width: 8,
              height: 8,
              borderRadius: 4,
              marginLeft: 3,
              marginRight: 3,
              marginTop: 3,
              marginBottom: 3,
            }}
          />
        }
        onTouchStart={() => (
          <View style={{height:100,width:50, backgroundColor:'red'}}>
             <Animated.Text 
             style={[styles.text,{opacity,transform}]}>
               TEST APP
               </Animated.Text>

          </View>
        )}
        loop={false}>
          {/* Slide 1 */}
        <View style={styles.MainView}>  
          <View style={styles.skipView}>
            <TouchableOpacity onPress={() => this.setState({swiperIndex: 3})}>
              <Text
                style={{
                  fontSize: 18,
                  color: '#8d9091',
                  marginLeft: 220,
                  marginBottom: 150,
                }}>
                Skip
              </Text>
            </TouchableOpacity>
          </View>

          <View >
            <Animated.Image
              source={require('../assets/applogo.png')}
              style={[
                styles.ImageStyle,
                {transform: [{scale: this.state.springValue}]},
              ]}
              resizeMode="contain"></Animated.Image>
            <Animated.View>
              <Animated.Text style={[styles.text,{opacity,transform}]}>TEST APP</Animated.Text>
              <Animated.Text style={{fontWeight:'bold',
              fontSize:18,textAlign:'center',
              color:'#b3b3b3',opacity,transform

              }}>PERSONALIZED BRAIN TRAINING</Animated.Text>
            </Animated.View>
          </View>
        </View>
         {/* Slide 2 */}
         <View style={styles.MainView}>  
          <View style={styles.skipView}>
            <TouchableOpacity onPress={() => }>
              <Text
                style={{
                  fontSize: 18,
                  color: '#8d9091',
                  marginLeft: 220,
                  marginBottom: 150,
                }}>
                Skip
              </Text>
            </TouchableOpacity>
          </View>
          </Swipe>

0 个答案:

没有答案