android - 在 React Native Android ViewManager 中公开 fragment

Question

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

根据文档，如果您无法扩展 YouTubeBaseActivity，他们建议使用 YouTubePlayerFragment。由于 Android 上的 React Native 不使用基于 XML 的布局，我尝试以编程方式创建 View 。但是，当我返回包装 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 fragment 的实际解决方案，但我使用了一些变通方法在 RN 中显示 YouTube View 。

(也许您可以先在您的 fragment 上尝试 3. 中的 hack。)

1. 制作您自己的 ReactActivity 来扩展 YouTubeBaseActivity 并让 MainActivity 扩展它。

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

2. 为 YouTubePlayerView 创建 YoutubeManager 类。

   当您实现 ReactPackage 时，它应该从 createViewManagers 获取一个 Activity 实例。

   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 View ，但它看起来像是空 View 。你需要一些技巧。

   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