AnswerBun.com

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

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.

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

1 Answers

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!

Related Questions

Error al iniciar servicio SQL Server

0  Asked on January 24, 2021 by jorge-galibert

     

Montar proyecto laravel 5.7 en hosting

1  Asked on January 24, 2021 by isc-ramirez

 

Solicitud Api google maps – javascript php

0  Asked on January 23, 2021 by esteban-baquero

       

Como evaluar si un audio se esta reproduciendo

1  Asked on January 23, 2021 by pancho-bolatti

       

Obtener nombre de una imagen cargada en PHP (Codeigniter)

1  Asked on January 22, 2021 by juan-luis

     

Obtener nombre de mes en Español (Laravel, Carbon)

6  Asked on January 22, 2021 by c47

   

Inyección de dependencias con listas?

0  Asked on January 22, 2021 by kenneth-steve-aguilar

       

Error al comunicar Sentry con Laravel 8

0  Asked on January 21, 2021 by dany-villarroel

   

¿como decifrar la cadena de conexion en el config?

1  Asked on January 21, 2021 by jose-leonardo-quiones

     

Conectar Angular 10 con una api en contenedores docker

0  Asked on January 20, 2021 by jodurpar

     

La conexión java con mysql no funciona

1  Asked on January 20, 2021 by carlos-aburto

     

Editar/Eliminar datos Firebase sobre un RecyclerView

1  Asked on January 19, 2021 by cristian-prieto-beltran

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.