Question

我正在尝试将YouTube Android API包装为React Native的UI组件。我在Android配置方面取得了成功（获得onInitializationSuccess），但我无法弄清楚如何将YouTubePlayerView恢复到我的React Native应用程序。

根据文档，如果您无法扩展YouTubeBaseActivity，他们建议您使用YouTubePlayerFragment。由于Android上的React Native不使用基于XML的布局，因此我尝试以编程方式创建视图。但是，当我返回包装View时（我尝试作为FrameLayout，但不确定这是否是正确的选择）我创建它不会在应用程序上呈现任何内容。

我希望现在保持非常简单，这里是必要的代码：

YouTubeManager.java

public class YouTubeManager extends SimpleViewManager<FrameLayout>  implements YouTubePlayer.OnInitializedListener {
// ...
@Override
    protected FrameLayout createViewInstance(ThemedReactContext reactContext) {
        this.reactContext = reactContext;

        FrameLayout view = new FrameLayout(reactContext);
        view.setId(View.generateViewId());


        FragmentManager fragmentManager = activity.getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

        YouTubePlayerFragment fragment = new YouTubePlayerFragment();
        fragmentTransaction.add(view.getId(), fragment);

        fragmentTransaction.commit();

        fragment.initialize("SECRET_KEY", this);

        return view;
    }
// ... 
}

YouTube.js

class YouTube extends Component {
    render () {
        return <YouTubeAndroid {...this.props}/>;
    }
};

var iface = {
    name : 'YouTube',
    propTypes : {
        ...View.propTypes
    },
};


var YouTubeAndroid = requireNativeComponent('YouTube', iface);

module.exports = YouTube;

index.android.js

var YouTube = require('./YouTube');

class YouTubePlayer extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>hello</Text>
        <YouTube />
      </View>
    );
  }
}

非常感谢任何帮助，谢谢！

Answer 1

我没有YouTube片段的实际解决方案，但我使用了一些解决方法在RN中显示YouTube视图。

（也许你可以先在你的片段上尝试3.中的黑客攻击。）

制作展开ReactActivity的{{1}} YouTubeBaseActivity并让MainActivity扩展它。

public abstract class ReactActivity extends YouTubeBaseActivity implements DefaultHardwareBackBtnHandler {
  // copy & paste RN's ReactActivity.java source

为YoutubeManager制作YouTubePlayerView课程。

实施Activity时，createViewManagers的实例应该是ReactPackage。

public class YoutubeManager extends SimpleViewManager<YouTubePlayerView> implements YouTubePlayer.OnInitializedListener, YouTubePlayer.PlayerStateChangeListener,  YouTubePlayer.PlaybackEventListener {

  public static final String REACT_CLASS = "RCTYoutube";
  private static final String YOUTUBE_API_KEY = "<YOUR_OWN_KEY>";

  private YouTubeBaseActivity mActivity = null;
  private YouTubePlayerView mYouTubePlayerView = null;

  public YoutubeManager(Activity activity) {
    super();
    mActivity = (YouTubeBaseActivity) activity;
  }

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

  @Override
  public YouTubePlayerView createViewInstance(ThemedReactContext context) {
    mContext = context;

    mYouTubePlayerView = new YouTubePlayerView(mActivity);
    mYouTubePlayerView.initialize(YOUTUBE_API_KEY, this);

    return mYouTubePlayerView;
  }

并为它制作一个js模块。

module.exports = requireNativeComponent('RCTYoutube', iface);

现在您可以显示YouTube视图，但它看起来像是空视图。你需要一些黑客。

componentDidMount() {
  this.setState({
    width: this.props.style.width,
    height: this.props.style.height - 1
  })
  this.timer = setInterval(()=>{
    this.setState({
      width: this.props.style.width,
      height: this.props.style.height + Math.floor(Math.random() * 2)
    })
  }, 500)
}

render() {
  return (<YoutubeView style={[style, { width: this.state.width, height: this.state.height }]} />)
}

componentWillUnmount() {
  if(this.timer) clearTimeout(this.timer);
}

您可以从我的应用中了解它的实际效果。

https://play.google.com/store/apps/details?id=kr.dobbit.sharehows

在React Native Android ViewManager中公开片段

1 个答案: