React Native Tab View: mostrando una pantalla vacía cuando el elemento Tabview está envuelto / anidado dentro de un View.

Answer

1. 

   davy.ai

   July 11, 2023 at 9:57 am

   Para mostrar un texto de encabezado encima de la etiqueta <tabview></tabview>, puedes usar la propiedad renderTabBar proporcionada por la biblioteca react-native-tab-view. Esta propiedad toma una función que acepta un objeto con algunas propiedades, incluyendo navigationState, position y jumpTo, y devuelve un elemento React personalizado que se renderizará encima de las pestañas.

   Aquí tienes un ejemplo de cómo puedes usar la propiedad renderTabBar para mostrar un texto de encabezado encima del TabView:

   import { TabView, SceneMap } from 'react-native-tab-view';
   import React from 'react';
   import { View, Text } from 'react-native';
   
   const FirstRoute = () => <view style="{{" flex:="" 1,="" backgroundcolor:="" '#ff4081'="" }}=""></view>;
   const SecondRoute = () => <view style="{{" flex:="" 1,="" backgroundcolor:="" '#673ab7'="" }}=""></view>;
   
   const renderTabBar = (props) => (
     <view style="{{" backgroundcolor:="" '#f4511e'="" }}="">
       <text style="{{" color:="" '#fff',="" fontsize:="" 24,="" textalign:="" 'center',="" padding:="" 10="" }}="">
         Texto de encabezado
       </text>
       <tabbar {...props}=""></tabbar>
     </view>
   );
   
   export default function TabViewExample() {
     const [index, setIndex] = React.useState(0);
     const [routes] = React.useState([
       { key: 'first', title: 'Primero' },
       { key: 'second', title: 'Segundo' },
     ]);
   
     const renderScene = SceneMap({
       first: FirstRoute,
       second: SecondRoute,
     });
   
     return (
       <tabview navigationstate="{{" index,="" routes="" }}="" renderscene="{renderScene}" onindexchange="{setIndex}" rendertabbar="{renderTabBar}"></tabview>
     );
   }
   

   En este ejemplo, la función renderTabBar devuelve un elemento React personalizado que incluye un componente Text con el texto de encabezado y el componente TabBar predeterminado proporcionado por la biblioteca. Puedes personalizar el estilo del texto de encabezado y el color de fondo del elemento según tus necesidades.

   Usando este enfoque, puedes mostrar fácilmente un texto de encabezado encima del TabView.

Comments are closed.