react-native开发的安卓apk要做一个产品的360度展示......求解rn有没有类似这样的包????

react-native开发的安卓apk要做一个产品的360度展示......求解rn有没有类似这样的包????

问题描述:

react-native开发的安卓apk要做一个产品的360度展示......求解rn有没有类似这样的包????

写了个非常简陋的东西,有很大的问题,因为uri是绑定的state,所以就会刷新,导致滑动的时候闪屏,就想用refs和setNativeProps来改变...但是我太菜了,还在想...哪位好心大哥帮忙改进一下吧

 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform, StyleSheet, Text, View, Image, TouchableHighlight, AppRegistry,



  PanResponder,
} from 'react-native';

import img_arr from './img_arr';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
var x = 0;
type Props = {};

export default class App extends Component<Props> {

  constructor(props) {
    super(props);
    this.state = {
      T_img:1,
      T_end:0,
      T_start:0,

    };
    this.lastX = this.state.marginLeft;
    this.lastY = this.state.marginTop;
  }


  componentWillMount() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => {
        return true;
      },
      onMoveShouldSetPanResponder: (evt, gestureState) => {
        return true;
      },
      onPanResponderGrant: (evt, gestureState) => {
        // this._highlight();
        console.log(evt, gestureState,"onPanResponderGrant",this.refs.myImage)
      },
      onPanResponderMove: (evt, gestureState) => {
        console.log(parseInt(gestureState.dx/24),this.state.T_img);
        //1 判断是左滑还是右滑
        if(gestureState.dx>0) {
          //右滑
          if(parseInt(gestureState.dx/24)+this.state.T_end == 59){
           this.setState({
             T_start:parseInt(gestureState.dx/24)
           })
          }

          this.setState({
            T_img:parseInt(gestureState.dx/24)+this.state.T_img > 59 ? parseInt(gestureState.dx/24) - this.state.T_start :parseInt(gestureState.dx/24)+this.state.T_img
          })
          console.log(this.refs.myImage.setNativeProps)
          // 目前考虑用refs setNativeProps dom操作 来改变uri 但是我这样写  实现不了...唉
          // this.refs.myImage.setNativeProps({
          //   source:{
          //     uri:parseInt(gestureState.dx/24)+this.state.T_img > 59 ? parseInt(gestureState.dx/24) - this.state.T_start :parseInt(gestureState.dx/24)+this.state.T_img
          //   }
          // });

        }else {
          //左滑
          if(Math.abs(parseInt(gestureState.dx/24))+this.state.T_end == 59){
            this.setState({
              T_start:Math.abs(parseInt(gestureState.dx/24))
            })
           }

           this.setState({
             T_img:Math.abs(parseInt(gestureState.dx/24))+this.state.T_img > 59 ? Math.abs(parseInt(gestureState.dx/24)) - this.state.T_start :Math.abs(parseInt(gestureState.dx/24))+this.state.T_img
           })
        }
      },
      onPanResponderRelease: (evt, gestureState) => {
        console.log(this.state.T_img,"onPanResponderRelease",parseInt(gestureState.dx/24))

           //右滑
           this.setState({
            T_img:this.state.T_img,
            T_end:this.state.T_img,
            T_start:0
          })
      },
      onPanResponderTerminate: (evt, gestureState) => {
        console.log(this.state.T_img,"onPanResponderTerminate")
      },
    });
  }

  _unhighlight() {
    this.setState({
      backgroundColor: 'red',
    });
  }

  _highlight() {
    this.setState({
      backgroundColor: 'blue',
    });
  }



  render() {
    return (
      <View
        style={styles.container}

      >
        <Image
          ref="myImage"
          {...this._panResponder.panHandlers}
          source={img_arr['png'+this.state.T_img]}
        />
      </View  >
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});