es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Combinar el cajón de navegación y la navegación por pila en React Native.

Estoy tratando de combinar la navegación por cajón (AppHomeDrawerNavigator) y la navegación por pilas (AddDeleteStackNavigator). El problema es que cuando estoy en la pantalla TodoList, tengo 2 encabezados: uno para el cajón y otro para la pila, pero no quiero ver el encabezado del cajón en esta pantalla.

¿Cómo puedo hacerlo?

const AddDeleteStackNavigator = createStackNavigator({
  AddTask: {
    screen: AddTask,
    navigationOptions: { header: () => true },
  },
  TodoList: {
    screen: TodoList,
    navigationOptions: ({ navigation }) => ({
      title: '',
      headerLeft: (<icon name="{'arrow-back-sharp'}" onpress="{()" ==""> { navigation.goBack() }} />),
    })
  },
});

const AppHomeDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: "Menú",
    },
  },

  AddTask: {
    screen: AddDeleteStackNavigator,
    navigationOptions: {
      title: "Agregar tarea",
    },
  },
});

const HomeStackContainer = createStackNavigator({
  AppHomeDrawerNavigator
}, {
  defaultNavigationOptions: ({ navigation }) => {
    return {
       headerTitle: "",
      headerLeft: () => (
        <icon style="{{" paddingleft:="" width="" 40="" }}="" onpress="{()" ==""> navigation.openDrawer()}
          name="menu"
          size={WIDTH / 13.8}
        />
      )
    }
  }
}
);

Esto es lo que tengo con este código:
https://i.stack.imgur.com/ZBAy9.png

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Para ocultar el encabezado del cajón en la pantalla TodoList, puede agregar la opción headerShown: false a navigationOptions de la pantalla TodoList en AddDeleteStackNavigator. Aquí está el código actualizado:

    “`
    const AddDeleteStackNavigator = createStackNavigator({
    AddTask: {
    screen: AddTask,
    navigationOptions: { header: () => true },
    },
    TodoList: {
    screen: TodoList,
    navigationOptions: ({ navigation }) => ({
    title: ”,
    headerLeft: ( { navigation.goBack() }} />),
    headerShown: false, // ocultar el encabezado del cajón en esta pantalla
    })
    },
    });

    const AppHomeDrawerNavigator = createDrawerNavigator({
    Home: {
    screen: Home,
    navigationOptions: {
    title: “Menú”,
    },
    },

    AddTask: {
    screen: AddDeleteStackNavigator,
    navigationOptions: {
    title: “Agregar tarea”,
    },
    },
    });

    const HomeStackContainer = createStackNavigator({
    AppHomeDrawerNavigator
    }, {
    defaultNavigationOptions: ({ navigation }) => {
    return {
    headerTitle: “”,
    headerLeft: () => (
    navigation.openDrawer()}
    name=”menu”
    size={WIDTH / 13.8}
    />
    )
    }
    }
    });
    “`

Comments are closed.