Hiển thị Fragment trong React Native Android ViewManager

Question

Tôi đang cố gắng bao bọc API Android của YouTube dưới dạng Thành phần giao diện người dùng cho React Native. Tôi đã thành công trong cấu hình Android của mọi thứ (nhận được onInitializationSuccess), tuy nhiên tôi không thể tìm hiểu cách tải YouTubePlayerView về ứng dụng React Native của mình.

Theo tài liệu, họ khuyên bạn nên sử dụng YouTubePlayerFragment nếu bạn không thể mở rộng YouTubeBaseActivity. Vì React Native trên Android không sử dụng các bố cục dựa trên XML, tôi đã cố tạo các khung nhìn theo chương trình. Tuy nhiên, khi tôi trả về dạng xem gói (tôi đã thử làm FrameLayout, nhưng không chắc đó có phải là lựa chọn đúng hay không), tôi đã tạo nó không hiển thị bất cứ thứ gì trên ứng dụng.

tôi tìm cách để giữ cho nó cực kỳ đơn giản cho bây giờ, ở đây là các bước cần thiết của mã:

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

Bất kỳ trợ giúp sẽ được thực sự đánh giá cao, cảm ơn bạn!

Answer 1

Tôi không có giải pháp thực tế cho đoạn YouTube, nhưng tôi đã sử dụng một số cách giải quyết để hiển thị chế độ xem YouTube trong RN.

(Có lẽ bạn có thể thử hack trong 3. trên mảnh của bạn đầu tiên.)

1. Hãy riêng ReactActivity của bạn kéo dài YouTubeBaseActivity và để MainActivity mở rộng nó.

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

2. Hãy YoutubeManager lớp cho YouTubePlayerView.

   Cần có một ví dụ Activity từ createViewManagers khi bạn triển khai 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; 
       } 
   

   và tạo mô-đun js cho nó.

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

3. Bây giờ bạn có thể hiển thị chế độ xem YouTube, nhưng có vẻ như chế độ xem trống. Bạn cần một số hack cho nó.

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

Bạn có thể xem làm thế nào nó hoạt động thực sự từ ứng dụng của tôi.

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