反応するネイティブのビューを追加するフラグメントが表示されない

Question

私は、動的に生成されたFrameLayoutを反応ネイティブビューに追加しました。 Framelayoutが表示されます。ビューにフラグメントを追加すると、何も表示されません。ここ

は、コードの一部です：

public FrameLayout createViewInstance(ThemedReactContext context) { 

      Fragment fragment = MapFragment.newInstance(mapKey); 
      FrameLayout view = new FrameLayout(context); 
      view.setWillNotDraw(false); 

      LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); 
      view.setLayoutParams(lp); 

      view.setId(View.generateViewId()); 

      view.setBackgroundColor(Color.parseColor("#1FFDDB")); 

      FragmentActivity activity = MainActivity.getFragmentActivity(); 

      FragmentManager fragmentManager = activity.getSupportFragmentManager(); 

      fragmentManager.beginTransaction().remove(fragment).commit(); 
      fragmentManager.executePendingTransactions(); 

      FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); 

      fragmentTransaction.add(0, fragment); 

      fragmentTransaction.show(fragment); 
      fragmentTransaction.attach(fragment); 
      fragmentTransaction.commit(); 
      fragmentManager.executePendingTransactions(); 
      return view; 
     } 

私はそれが表示されているビューにのTextViewを追加する場合：

// add a textfield to the view 
TextView textView1 = new TextView(context); 
textView1.setText("Android"); 
textView1.setTextSize(30); 
textView1.setGravity(Gravity.CENTER); 

view.setVisibility(View.VISIBLE); 

view.addView(textView1); 

ので断片との問題があります。 フラグメントが表示されない理由を教えてください。

Answer 1

またこの問題が発生し、解決策が見つかりました。

アンドロイド側： まず、そしてcreateViewInstance方法でそれを膨張し、容器に断片を追加する機能を定義container_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:orientation="vertical"> 
    <FrameLayout 
     android:id="@+id/container" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"/> 
</LinearLayout> 

を作成します。

@Override 
public String getName() { 
    return "ExampleFragment"; 
} 
@Override 
protected View createViewInstance(ThemedReactContext reactContext) { 
    LinearLayout root = (LinearLayout) LayoutInflater.from(reactContext) 
       .inflate(R.layout.layout_container, null); 
    return root; 
} 

@Nullable 
@Override 
public Map<String, Integer> getCommandsMap() { 
    return MapBuilder.of(
      "create", COMMAND_CREATE 
    ); 

} 

@Override 
public void receiveCommand(View view, int commandId, @Nullable ReadableArray args) { 
    Log.d(TAG, "receiveCommand: " + commandId); 
    switch (commandId) { 
     case COMMAND_CREATE: 
      createFragment(); 
      break; 
    } 
} 

private void createFragment() { 
    MapFragment mapFragment = new MapFragment(); 
    mContext.getCurrentActivity() 
      .getFragmentManager() 
      .beginTransaction() 
      .add(R.id.container, mapFragment) 
      .commit(); 
} 

RN側： その後、あなたはRNでそれを使用することができ、ネイティブUIコンポーネントFragment.js

import {NativeModules, requireNativeComponent, View, UIManager, findNodeHandle} from 'react-native'; 
const fragmentIFace = { 
    name: "Fragment", 
    propTypes: { 
    ...View.propTypes, 
    } 
}; 
const NativeFragment = requireNativeComponent("ExampleFragment", fragmentIFace); 
class ExampleFragment extends Component { 
    fragment; 
    render() { 
    return <NativeFragment 
     ref={c => this.fragment = c} 
     {...this.props} style={{flex: 1}}/> 
    } 

    create =() => { 
    UIManager.dispatchViewManagerCommand(
     findNodeHandle(this.fragment), 
     UIManager.MapFragment.Commands.create, 
     [] // No args 
    ) 
    } 
export default ExampleFragment 

を作成します。

class App extends Component { 
    componentDidMount() { 
     this.fragment.create(); 
    } 
    render() { 
     return (
      <View> 
       <ExampleFragment ref={r=>this.fragment = r} /> 
      </View> 
     ); 
    } 
} 

は、ここでの説明です：あなたのコードで
は、あなたがフラグメントコンテナすることはできませんビューにフラグメントを追加してみてください。
通常View.generateViewId()は0x1を返します。これはReactRootViewと重複しており、アプリがクラッシュすることはありません。コンテナビューに他のIDを設定した場合、例外の表示が発生し、現在のアプリケーションのレイアウトからビューのIDを見つけることができないため、アプリケーションがクラッシュします。
Android Studioのレイアウトインスペクタで確認できます。

idsが重複しないようにするには、XMLで定義するのが最も良い方法です。 それで、私はxmlからルートビューを膨らませるのです。
rootのid（私の例ではLinearLayout）を設定すると、追加されたときにRNによってそのIDが削除されるため、その子が必要になります。
RNがルートビュー（didComponentMount()）を取得した後、RNコンポーネントからcreate（）を呼び出す必要があります。