React Native: Mostrar una vista modal desde un botón de la barra de pestañas

17 Jun, 2023 Programación 0

Estoy usando React Native para mi aplicación. Todo está funcionando bien excepto una cosa.

Me gustaría implementar una vista de modal que se muestre cuando el usuario hace clic en el botón central (+) de la barra de pestañas. Se parece a la aplicación de Youtube.

Después de varios días, no encontré una solución efectiva.

Aquí está mi código para la barra de pestañas y el navegador.

Tab:

export default function App() {
return (
<tabs.navigator tabbaroptions=”{{labelStyle:” {fontsize:14},=”” activetintcolor:=”” ‘purple’,=”” showlabel:=”” false}}=””>
<tabs.screen name=”Ventes” component=”{venteScreenNavigator}” options=”{{” headershown:=”” false,=”” tabbaricon:=”” ({=”” focused=”” })=””> (

),
}}
/>
<tabs.screen name=”Map” component=”{mapScreenNavigator}” options=”{{” headershown:=”” false,=”” tabbaricon:=”” ({=”” focused=”” })=””> (

)
}}
/>

    <tabs.screen name="Liste" component="{listeScreenNavigator}" options="{{" headershown:="" false,="" tabbaricon:="" ({="" focused="" })=""> (
        <view style="{{" alignitems:="" "center",="" justifycontent:="" "center"="" }}="">
          <image source="{require(&quot;./assets/Document.png&quot;)}" resizemode="contain" style="{{" width:="" 25,="" height:="" 25,="" tintcolor:="" focused="" "black"="" :="" "gray",="" }}=""></image>
        </view>
      ),
    }}
    />
    <tabs.screen name="Espace" component="{espaceScreenNavigator}" options="{{" headershown:="" false,="" tabbaricon:="" ({="" focused="" })=""> (
        <view style="{{" alignitems:="" "center",="" justifycontent:="" "center"="" }}="">
          <image source="{require(&quot;./assets/monespaceicone.png&quot;)}" resizemode="contain" style="{{" width:="" 25,="" height:="" 25,="" tintcolor:="" focused="" "black"="" :="" "gray",="" }}=""></image>
        </view>
      ),
    }}
    />

  </tabs.screen></tabs.screen></tabs.screen></tabs.screen></tabs.navigator>
</navigationcontainer>

)
}

Navegador:

const venteScreenNavigator = () => {
return (

    <stack.navigator>
        <stack.screen name="Ventes" component="{Ventes}" options="{{" headerright:="" ()=""> (

               <view style="{{flexDirection:" 'row',="" marginright:="" 10}}="">
                    <touchableopacity>
                    <image style="{styles.image}" source="{require('../assets/Plus.png')}">
                    </image>
                    </touchableopacity>

                    <touchableopacity>
                    <image style="{styles.image}" source="{require('../assets/Chat.png')}">
                    </image>
                    </touchableopacity>
               </view>        
            )                
        }}
        />
        <stack.screen name="Screens" component="{Screens}"></stack.screen>
    </stack.screen></stack.navigator>
)

}

export {venteScreenNavigator}

const mapScreenNavigator = () => {
return (
<stack.navigator>

        <stack.screen name="Map" component="{Map}" options="{{" headerright:="" ()=""> (

               <view style="{{flexDirection:" 'row',="" marginright:="" 10}}="">
                    <touchableopacity>
                    <image style="{styles.image}" source="{require('../assets/Plus.png')}">
                    </image>
                    </touchableopacity>

                    <touchableopacity>
                    <image style="{styles.image}" source="{require('../assets/Chat.png')}">
                    </image>
                    </touchableopacity>
               </view>                 
            )               
        }}
        />
        <stack.screen name="Screens" component="{Screens}"></stack.screen>
    </stack.screen></stack.navigator>
)

}

export {mapScreenNavigator}

const listeScreenNavigator = () => {
return (
<stack.navigator>
<stack.screen name=”Liste” component=”{Liste}” options=”{{” headerright:=”” ()=””> (

               <view style="{{flexDirection:" 'row',="" marginright:="" 10}}="">
                    <touchableopacity>
                    <image style="{styles.image}" source="{require('../assets/Plus.png')}">
                    </image>
                    </touchableopacity>

                    <touchableopacity>
                    <image style="{styles.image}" source="{require('../assets/Chat.png')}">
                    </image>
                    </touchableopacity>

               </view>


            )

        }}
        />
        <stack.screen name="Screens" component="{Screens}"></stack.screen>
    </stack.screen></stack.navigator>
)

}

export {listeScreenNavigator}

const espaceScreenNavigator = () => {
return (
<stack.navigator>
<stack.screen name=”Espace” component=”{Espace}” options=”{{” headerright:=”” ()=””> (

               <view style="{{flexDirection:" 'row',="" marginright:="" 10}}="">
                    <touchableopacity>
                    <image style="{styles.image}" source="{require('../assets/Plus.png')}">
                    </image>
                    </touchableopacity>

                    <touchableopacity>
                    <image style="{styles.image}" source="{require('../assets/Chat.png')}">
                    </image>
                    </touchableopacity>

               </view>
            )

        }}
        />
        <stack.screen name="Screens" component="{Screens}"></stack.screen>
        <stack.screen name="Profil" component="{Profil}" options="{{" headerright:="" ()=""> (

               <view style="{{flexDirection:" 'row',="" marginright:="" 10}}="">
                    <touchableopacity>
                    <image style="{styles.image}" source="{require('../assets/Setting.png')}">
                    </image>
                    </touchableopacity>
               </view>                    
            )               
        }}
        />
        <stack.screen name="ModifierProfil" component="{ModifierProfil}"></stack.screen>           
    </stack.screen></stack.screen></stack.navigator>

)

}

export {espaceScreenNavigator}

¿Puede decirme cómo mostrar el modal cuando el usuario hace clic en el botón de la barra de pestañas?

¡Gracias chicos!

Tags: AMAZON-JAVASCRIPT-SDK, CREATE-REACT-NATIVE-APP, MODAL-DIALOG, QTABBAR

Answer

davy.ai

June 17, 2023 at 8:23 pm

Para mostrar un modal cuando el usuario hace clic en el botón del medio (+) de la tabbar en React Native, se puede utilizar el paquete react-native-modal.

Primero, instala el paquete ejecutando el siguiente comando en tu terminal:

npm install react-native-modal

Luego, en tu archivo App.js, importa el paquete:

import Modal from 'react-native-modal';

A continuación, añade un estado a tu componente para manejar la visibilidad del modal:

export default function App() {
  const [isModalVisible, setIsModalVisible] = useState(false);

  // ...
}

Añade un componente Modal y utiliza la propiedad isVisible para mostrar u ocultar el modal:

export default function App() {
  const [isModalVisible, setIsModalVisible] = useState(false);

  // ...

  return (
    <navigationcontainer>
      <tabs.navigator tabbaroptions="{{" labelstyle:="" {="" fontsize:="" 14="" },="" activetintcolor:="" "purple",="" showlabel:="" false="" }}="">
        <tabs.screen name="Ventes" component="{venteScreenNavigator}" options="{{" headershown:="" false,="" tabbaricon:="" ({="" focused="" })=""> (
              <view style="{{" alignitems:="" "center",="" justifycontent:="" "center"="" }}="">
                <image source="{require("./assets/Buy.png")}" resizemode="contain" style="{{" width:="" 25,="" height:="" 25,="" tintcolor:="" focused="" "black"="" :="" "gray",="" }}=""></image>
              </view>
            ),
          }}
        />
        <tabs.screen name="Map" component="{mapScreenNavigator}" options="{{" headershown:="" false,="" tabbaricon:="" ({="" focused="" })=""> (
              <view style="{{" alignitems:="" "center",="" justifycontent:="" "center"="" }}="">
                <image source="{require("./assets/geolocalisationicone.png")}" resizemode="contain" style="{{" width:="" 25,="" height:="" 25,="" tintcolor:="" focused="" "black"="" :="" "gray",="" }}=""></image>
              </view>
            ),
          }}
        />

        {/* Añade el componente Modal como la tercera pantalla de la tab */}
        <tabs.screen name="Modal" component="{()" ==""> null}
          listeners={({ navigation }) => ({
            tabPress: (e) => {
              e.preventDefault(); // Evita que la pestaña se centre
              setIsModalVisible(true); // Muestra el modal
            },
          })}
        />

        <tabs.screen name="Liste" component="{listeScreenNavigator}" options="{{" headershown:="" false,="" tabbaricon:="" ({="" focused="" })=""> (
              <view style="{{" alignitems:="" "center",="" justifycontent:="" "center"="" }}="">
                <image source="{require("./assets/Document.png")}" resizemode="contain" style="{{" width:="" 25,="" height:="" 25,="" tintcolor:="" focused="" "black"="" :="" "gray",="" }}=""></image>
              </view>
            ),
          }}
        />
        <tabs.screen name="Espace" component="{espaceScreenNavigator}" options="{{" headershown:="" false,="" tabbaricon:="" ({="" focused="" })=""> (
              <view style="{{" alignitems:="" "center",="" justifycontent:="" "center"="" }}="">
                <image source="{require("./assets/monespaceicone.png")}" resizemode="contain" style="{{" width:="" 25,="" height:="" 25,="" tintcolor:="" focused="" "black"="" :="" "gray",="" }}=""></image>
              </view>
            ),
          }}
        />
      </tabs.screen></tabs.screen></tabs.screen></tabs.screen></tabs.screen></tabs.navigator>

      {/* Añade el componente Modal */}
      <modal isvisible="{isModalVisible}">
        {/* El contenido del modal */}
        <view style="{{" flex:="" 1="" }}="">
          <text>¡Hola desde el modal!</text>
          <button title="Cerrar" onpress="{()" ==""> setIsModalVisible(false)} />
        </button></view>
      </modal>
    </navigationcontainer>
  );
}

En el componente Tabs.Screen que representa el modal, utiliza la propiedad listeners para evitar que la pestaña se centre y mostrar el modal en su lugar. Cuando el usuario hace clic en el botón “Cerrar” dentro del modal, se puede ocultar el modal de nuevo estableciendo el estado isModalVisible a false.

Esto debería mostrar un modal cuando el usuario hace clic en el botón del medio (+) de la tabbar en tu aplicación de React Native.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Answer

davy.ai