React Native Android ViewManagerでフラグメントを公開する

Question

React NativeのUIコンポーネントとしてYouTube Android APIをラップしようとしています。私はAndroidの設定（onInitializationSuccessを取得）に成功しましたが、YouTubePlayerViewをReact Nativeアプリに戻す方法がわかりません。

YouTubeBaseActivityを拡張できない場合は、ドキュメントによれば、YouTubePlayerFragmentの使用をおすすめします。 React Native for Androidは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. くださいYouTubeBaseActivityを拡張し、MainActivityはそれを拡張させ、独自のReactActivity。

   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ビューを表示できますが、空のビューのようです。あなたはそれのためのいくつかのハックが必要です。あなたはそれが私のアプリから、実際にどのように動作するかを見ることができます

   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