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.
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP