在React Native Android ViewManager中公开片段

Question

我试图将YouTube Android API包装为React Native的UI组件.我已成功完成Android配置(获取onInitializationSuccess),但我无法弄清楚如何将YouTubePlayerView恢复到我的React Native应用程序.

根据文档,如果您无法扩展YouTubeBaseActivity,他们建议您使用YouTubePlayerFragment.由于Android上的React Native不使用基于XML的布局,因此我尝试以编程方式创建视图.但是,当我返回包装视图(我尝试作为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.你的片段.)

1. 使你自己ReactActivity扩展YouTubeBaseActivity并MainActivity扩展它.

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

2. 制作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);
   

3. 现在您可以显示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