0

我有一个工作的 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 应用程序的开头开始。

4

1 回答 1

1

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

将有三个文件,即视图管理器、您的视图文件和包文件

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

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

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

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

2)Native 类进行通信:(查看管理器文件)

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());
    }
}

干杯:)

于 2017-04-06T19:51:19.000 回答