Question

我有一个工作的Android原生应用程序，我需要调用作为反应原型的反应导航视图，我如何在组件中包装Android应用程序并在StackNavigator中调用它：

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

如何将变量传递给该视图＆＃39;？

我试图关注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());
    }
}

干杯：）

如何将Android应用程序包装为反应本机组件（完整视图）？

1 个答案: