在React Native Android ViewManager中公开片段 [英] Exposing Fragment in React Native Android ViewManager

问题描述

我正在尝试将YouTube Android API包装为React Native的UI组件.我已经成功完成了Android的配置(获得onInitializationSuccess)，但是我无法弄清楚如何将YouTubePlayerView返回到我的React Native应用.

I am attempting to wrap the YouTube Android API as a UI Component for React Native. I have been successful in the Android configuration of things (getting onInitializationSuccess), however I am unable to figure out how get the YouTubePlayerView back to my React Native app.

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

According to the docs, they recommend using YouTubePlayerFragment if you can not extend YouTubeBaseActivity. Since React Native on Android does not use XML based layouts I attempted to create the views programmatically. However, when I return the wrapping View ( I tried as a FrameLayout, but not sure if that was the right choice) I created it does not render anything on the application.

我现在希望使其保持极其简单，这是一些必要的代码:

I am looking to keep it extremely simple for now, here are the necessary bits of code:

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

任何帮助将不胜感激，谢谢！

Any help would be really appreciated, thank you!

推荐答案

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

I don't have actual solution for the YouTube fragment, but I used some workaround for displaying an YouTube view in RN.

(也许您可以先在片段上的3.中尝试破解.)

(Maybe you can try the hack in 3. on your fragment first.)

1. 制作自己的ReactActivity来扩展YouTubeBaseActivity，然后让MainActivity对其进行扩展.

1. Make your own ReactActivity that extends YouTubeBaseActivity and let MainActivity extends it.

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

为YouTubePlayerView创建YoutubeManager类.

Make YoutubeManager class for the YouTubePlayerView.

在实现ReactPackage时，它应该从createViewManagers中获取一个Activity实例.

It should takes an Activity instance from createViewManagers when you implements 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模块.

and make a js module for it.

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

现在，您可以显示YouTube视图，但它看起来像是空白视图.您需要一些技巧.

Now You can display an YouTube view, but it seems like empty view. You need some hack for it.

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

您可以从我的应用中查看其实际工作方式.

You can see how it works actually from my app.

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

这篇关于在React Native Android ViewManager中公开片段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！