如何将 android 应用程序包装为反应原生组件（完整视图）？

Question

我有一个可以工作的 android 本机应用程序，我需要在 react-navigation 中将其作为视图调用，我如何将 android 应用程序包装在一个组件中并在 StackNavigator 中调用它，例如：

const Nav = StackNavigator({
  Login: { screen: LoginView },
  Player: { screen: PlayerView },
  Android: { screen: AndroidView }, //this should be the android native view
},{
    headerMode: 'none',
});

如何将变量传递给该“视图”？

我尝试关注 react-native github 项目上的文档，但我并不完全了解我必须在我的应用中实现什么，因为文档从 android 应用的开头开始。

Answer 1

已经实现的本机代码的集成非常简单。请按照以下步骤操作：

会有三个文件，分别是视图管理器、你的视图文件和包文件

1) 创建一个 js 文件，您将在其中与本机代码进行通信：

 var { requireNativeComponent, PropTypes } = require('react-native');

var tosendvalue= {
  name: 'xyz',
  propTypes: {
    value: PropTypes.string
  }
};

module.exports = requireNativeComponent('RCTtest', tosendvalue);

2) 通信的原生类：（查看管理器文件）

public class TestViewManager extends SimpleViewManager<TestViewDemo>{ 
 public static final String REACT_CLASS = “RCTtest”;
 @Override
 public String getName() {
   return REACT_CLASS;
 }

 // Views are created in the createViewInstance method, the view should  //initialize itself in its default state, any properties will be set 
//via a follow up call to updateView.


   @Override
     protected TestViewDemo createViewInstance(ThemedReactContext 
        themedReactContext) {
       return new TestViewDemo (themedReactContext);
     }
      //we will check the variable that we have send it from javascript file.
     @ReactProp(name = "value")
public void setVauleFunction(TestViewDemo view, @Nullable String value) {
   view.setVauleFunction(value);             
}

3) 你的原生视图：（你的视图类）

   public class TestViewDemo extends Activity {
 //your predefined view
 @Override public void onCreate(Bundle icicle) {
   super.onCreate(icicle);
   setContentView(R.layout.videoview);
   mEditText = (EditText) findViewById(R.id.url);
   mVideoView = (VideoView) findViewById(R.id.surface_view);
   if (path == "") { return; }
   mVideoView.setVideoPath(path);
   mVideoView.setMediaController(new MediaController(this));
   mVideoView.requestFocus();
 }

  public void setVauleFunction(value)
 {
  log.e(value)//here you will get your react native value.
 }
    ...
    }

4) 现在你的包文件：

public class ReactVideoPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
         //added my view manager
   return Arrays.<ViewManager>asList(new TestViewManager());
    }
}

干杯:)