TransWikia.com

Como puedo mostrar un Fragment de android desde react native al presionar un boton

Stack Overflow en español Asked by GmrYael on December 27, 2020

Estoy tratando de mostrar un Fragment de Android al presionar un boton en react native

Componente de React

...react class definition
render () {
  return (
    <View>
       <Button title="Guardar"
               titleStyle={{ fontSize: 18, color: 'white', fontFamily: 'Lato-Bold' }}
               disabled={!this.state.formValid}
               onPress={() => {SampleModule.loadFragment(10)}}
               raised
               buttonStyle={{ backgroundColor: '#06D7A0' }} />
    </View>
  )
}

Importando el modulo a javascript

NativeModule.js

import { NativeModules } from 'react-native'
module.exports = NativeModules.SampleModule;

Creando modulo de java

SampleModule.java

public class SampleModule extends ReactContextBaseJavaModule {
    private static ReactApplicationContext reactContext;

    SampleModule(ReactApplicationContext context) {
        super(context);
        reactContext = context;
    }

    @Override
      public String getName() {
      return "SampleModule";
    }

    @ReactMethod
    public void loadFragment(int viewId) {
      System.out.println(viewId);
      LayoutInflater inflater = LayoutInflater.from(reactContext);
      View myView = inflater.inflate(R.layout.my_fragment, null, false);
      myView.bringToFront();
    }
}

Creando el paquete de java

SamplePackage.java

public class SamplePackage implements ReactPackage{

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
      return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(
        ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new SampleModule(reactContext));

    return modules;
  }

Archivo XML del Fragment

my_fragment.xml

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="@{String.format(@string/sbp_value, model.sbp)}"
            android:textSize="18sp"
            android:textColor="#808080"
            fontPath="fonts/Lato-Regular.ttf" />
        
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="@{content::clickUploadData}"
            android:text="Sample"
            android:textSize="16sp"
            android:visibility="@{showUpload?View.VISIBLE:View.GONE}" />

    </LinearLayout>
</layout>

No logro hacer que el fragment se muestre al presionar el boton desde react native.

One Answer

Para mostrar una fragment en react native, tienes que presentarlo dentro de una vista tienes que crear un viewmanager que tendra tu fragment o puedes presentar un activity con tu fragment que seria lo mas facil.

Lo que estas haciendo es un modulo nativo, los modulos nativos no presentan nada solo ejecutan codigos por ejemplo presentar un activity.

Para presentar un activity en un modulo seria asi :

 @ReactMethod
    public void loadFragment(int viewId) {
      reactContext.startActivity(Intent(reactContext,MiActividadConElFragment.class);
      
    }

Asi creas tu view manager para exportarlo a react native:

  public class SampleViewManager extends SimpleViewManager<View> {
    
        @Override
  public String getName() {
  return "SampleView";
}
    
    @Override
        public View createViewInstance(ThemedReactContext reactContext ){
            return  LayoutInflater.from(reactContext).inflate(R.layout.my_fragment, null, false)
        }
    }

Lo exportas en tu samplePackage:

 @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
       List<ViewManager> views= new ArrayList<>();

    views.add(new SampleViewManager());

    return views;
  }

En react lo exportas :

import { requireNativeComponent } from 'react-native';

export requireNativeComponent('SampleView', null);

Ya lo usas como cualquier view de react native y lo muestras o no.

Correct answer by OsAndNoTi on December 27, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP