开发者问题收集

'错误:'VideoPlayer' 没有原生类型为 'number' 的原生 prop'VideoPlayerView.scaleY' 的 propType

2015-11-28
567

VideoPlayerView 是我为特定项目在 Android 和 IOS 中制作的自定义原生组件。

以下是 ReactVideoManager.java 制作的导出原生模块 VideoPlayerView 的部分代码

public class ReactVideoManager extends  SimpleViewManager<MeasureChangedVideoView> {

    public static final String REACT_CLASS = "VideoPlayerView";

    private ThemedReactContext mReactContext;

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    protected MeasureChangedVideoView createViewInstance(ThemedReactContext reactContext) {
        mReactContext = reactContext;
        return new MeasureChangedVideoView(reactContext);
    }

    @ReactProp(name = "url")
    public void setUrl(MeasureChangedVideoView view, @Nullable String url) {
        Uri uri = Uri.parse(url);
        view.setVideoURI(uri);
        view.setMediaController(new MediaController(mReactContext));

        view.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
            @Override
            public void onPrepared(MediaPlayer mp) {
                mp.start();
            }
        });
    }
}

下面是该模块的错误日志:

Error: `VideoPlayer` has no propType for native prop `VideoPlayerView.scaleY` of native type `number`

此原生视图的对应 js 组件是 VideoPlayer.js:

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

class VideoPlayer extends React.Component {
  render() {
    return <VideoPlayerView {...this.props} />;
  }
}
VideoPlayer.propTypes = {
  url: React.PropTypes.string
};

var VideoPlayerView = requireNativeComponent('VideoPlayerView', VideoPlayer);
module.exports = VideoPlayer;

这个模块曾经在另一个项目 B 中工作。唯一的区别是项目 B 中存在 react.gradle 文件。

完全不知道 react.gradle 文件是在哪里生成的。我还尝试重新启动打包程序,再次清理项目构建。

项目中使用的 gradle 依赖项是

compile "com.facebook.react:react-native:0.14.+"
1个回答

一定要使用最新版本,并且文档 https://facebook.github.io/react-native/docs/native-components-android.html#content 中指定的方式应该可以正常工作。

事实证明,我使用的是 React 版本 0.13+(在 package.json 中),并且使用 @Reactprop 注释添加属性的方式是在 gradle 0.14 依赖项中引入的,这种方式与旧版本的 React-native(0.13)配合使用效果不佳。

如果由于某种原因你碰巧在 0.13 或更早版本上工作,则手动混合 props 的方式如 https://github.com/facebook/react-native/issues/3478 必须遵循。

jay shah
2015-11-28