react native中Android Surfaceview原生ui组件渲染问题

问题描述

在我的一个 React Native 项目中，我需要添加一个自定义表面视图，我们将在其中渲染一些内容。因此，在向主项目添加任何内容之前，我创建了一个测试 React Native 项目。

这是我的自定义表面视图。这很直接。只显示一个红球在移动。

BallSurfaceView.java

package com.myreactnative;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class BallSurfaceView extends SurfaceView implements SurfaceHolder.Callback,Runnable{
    private static final String TAG = "BallSurfaceView";

    private SurfaceHolder holder;
    private boolean runFlag;
    private Paint paint = new Paint();

    //Rewrite the constructor
    public BallSurfaceView(Context context) {
        this(context,null);
    }

    public BallSurfaceView(Context context,AttributeSet attrs) {
        this(context,attrs,0);
    }

    public BallSurfaceView(Context context,AttributeSet attrs,int defStyle) {
        super(context,defStyle);
         // Get the Surface handle object,get the canvas through the object
        holder = this.getHolder();
         // Add callback interface
        holder.addCallback(this);
        //      setFocusable(true);
    }

     //Method to implement the SurfaceHolder.Callback interface
    @Override//call when switching between horizontal and vertical
    public void surfaceChanged(SurfaceHolder arg0,int arg1,int arg2,int arg3) {

    }

     //Called when the SurfaceView is created
    @Override
    public void surfaceCreated(SurfaceHolder arg0) {
         //Start the thread when creating
        runFlag = true;
        new Thread(this).start();
    }

     //Called when the SurfaceView ends
    @Override
    public void surfaceDestroyed(SurfaceHolder arg0) {
         //End the thread when exiting
                runFlag = false;
    }

     //Rewrite the run method
    @Override
    public void run() {
        int x = 0;
        int y = 0;
        int dx = 2;
        int dy = 3;
        int width = 30;
        int height = 30;
        while(runFlag){
            Canvas canvas = null;
            try {
                 //Lock the brush object
                canvas = holder.lockCanvas();
                 //Set the brush
                paint.setColor(Color.WHITE);
                paint.setStyle(Paint.Style.FILL);
                 //Fill the background color
                Rect rect = new Rect(0,this.getWidth(),this.getHeight());
                canvas.drawRect(rect,paint);

                 //draw a small ball,set the color of the ball to red
                paint.setColor(Color.RED);
                RectF rf = new RectF(x,y,x+width,y+height);
                canvas.drawoval(rf,paint);

                //Small ball moves
                x += dx;
                y += dy;
                //Boundary judgment
                if(x<=0 || x>=this.getWidth()){
                    dx = -dx;
                }
                if(y<=0 || y>=this.getHeight()){
                    dy = -dy;
                }

                Log.e(TAG,"run x: "+x+" y:"+y);

                Thread.sleep(40);

            } catch (InterruptedException e) {
                e.printstacktrace();
            }finally{
                //When the canvas is used up,release it.
                if(canvas != null){
                    holder.unlockCanvasAndPost(canvas);
                }
            }
        }
    }

    public void setChannelName() {
        Log.e(TAG,"----------------------------------");
        Log.e(TAG,"setChannelName----------------------------------");
        Log.e(TAG,"----------------------------------");
    }
}

现在要在我的 React Native 部分使用它，这里是我使用的两个文件。

vv.js

'use strict';
import React,{ Component,PropTypes }from 'react';
import {
    requireNativeComponent,View,UIManager,findNodeHandle,}from 'react-native';

var RCT_VIDEO_REF = 'VideoView';
class VideoView extends Component {
    constructor(props) {
        super(props);
    }
    pause(){
        UIManager.dispatchViewManagerCommand(
            findNodeHandle(this.refs[RCT_VIDEO_REF]),UIManager.RV.Commands.pause,null
        );
    }

    start(){
        UIManager.dispatchViewManagerCommand(
            findNodeHandle(this.refs[RCT_VIDEO_REF]),UIManager.RV.Commands.start,null
        );
    }
    render(){
        return <RCTVideoView
            {...this.props}
            ref = {RCT_VIDEO_REF}
        />;
    };
}

var RCTVideoView = requireNativeComponent('RV',VideoView,{
    nativeOnly: {onChange: true}
});
module.exports = VideoView;

index.js

import React,{ Component } from 'react';
import {
  AppRegistry,StyleSheet,Text,NativeModules,processColor,TouchableOpacity
} from 'react-native';
import VideoView from './vv';

export default class untitled extends Component {
    onPresspause(){
        this.video.pause();
    }

    onPressstart(){
        this.video.start();
    }

    render() {
      return (
        <View style={styles.container}>
          <VideoView
              style={{height:450,width:580}}
              ref={(video)=>{this.video = video}}
          />
          <View style={{height:50,flexDirection:'row',justifyContent:'flex-start'}}>
            <TouchableOpacity style={{marginLeft:10}} onPress={this.onPresspause.bind(this)}>
              <Text> Pause </ Text>
            </TouchableOpacity>
            <TouchableOpacity style={{marginLeft:10}} onPress={this.onPressstart.bind(this)}>
                          <Text> Start </ Text>
            </TouchableOpacity>
          </View>
        </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,});
AppRegistry.registerComponent('main',() => untitled);

现在，当我运行这个项目时，一切似乎都很好。我可以看到正在渲染的视图没有任何问题。

现在，当我将此代码添加到我的主要 React Native 项目时，一切正常，但视图无法呈现。

我知道 React 使用虚拟 dom 来比较渲染视图的差异。 由于我没有设置任何状态或道具，并且自定义视图更新发生在本机端，为什么 react native 正在更新一个项目中的视图，而没有更新其他项目中的视图。

我缺少什么概念？

我是一名原生安卓开发者。所以，如果你能指出我正确的方向，那就太好了。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）