陈小洋 2019-04-19 17:55 采纳率: 0%
浏览 522
已结题

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

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

  • 写回答

1条回答 默认 最新

  • 陈小洋 2019-04-22 15:07
    关注

    写了个非常简陋的东西,有很大的问题,因为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,
      },
    });
    
    
    
    
    评论

报告相同问题?

悬赏问题

  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形