Gemeinsame tabBar in spezifischen Komponenten reagieren-native-Router-Flux & reagieren-native

Ich habe verschiedene Ansichten in meiner app, drei von ihnen auf die TabBar so ähnlich verlinkt sind: menu.jsGemeinsame tabBar in spezifischen Komponenten reagieren-native-Router-Flux & reagieren-native

<ScrollableTabView 
     style={{marginTop: 0, borderWidth:1 }} 
     tabBarPosition='bottom' 
     scrollWithoutAnimation={true} 
     initialPage={0} 
     locked={true} 
     ref={(tabView) => { this.tabView = tabView; }} 
     renderTabBar={() => <UbicalaTabBar />} 
    > 
     <View tabLabel="database" style={{flex: 1}}> 
      <MLS /> 
     </View> 
     <View tabLabel="apartment" style={{flex: 1}}> 
     <Inmuebles/> 
     </View> 
    {/* 
     <View tabLabel="bubbles" style={{flex: 1}}> 
     <Chat/> 
     </View> 
     */} 
     <View tabLabel="icons2" style={{flex: 1}}> 
     <Menu_Main /> 
     </View> 
    </ScrollableTabView>

Hier ist ein Beispiel für die TabBar: tabBarExample

, wenn ich die "Requerimientos" drücken touchabl eHighlight ruft die "Requerimientos" -Ansicht auf, aber die TabBar verschwindet. Hier ist ein Screenshot der Ausgabe: IssueExample

wie könnte ich das TabBar statisch machen ?, ich möchte es in den verschiedenen Ansichten zeigen oder COMPONENTES, dass ich überall aus den tabBar Elemente haben.

Requerimientos.js

<View> 
 
       <Spinner 
 
     
 
     textContent={"Cargando..."} 
 
     overlayColor={"rgba(8, 34, 58,0.5)"} 
 
     textStyle={{color: '#FFF'}} /> 
 

 
     <StatusBar 
 
     barStyle="light-content" 
 
     hidden={false} 
 
     /> 
 
     
 
      {/* 
 
      ESTA ES LA BARRA DE NAVEGACION 
 
      */} 
 
     <TouchableHighlight onPress={()=>{Actions.menu() }}> 
 
       <View style={styles.nav_bar} > 
 
        <Text style={styles.child1}><Text style={styles.texto_nav}>Mis Requerimientos</Text></Text> 
 
       </View> 
 
       </TouchableHighlight> 
 

 
     {/* 
 
      ESTA ES LA DEL BOTON NUEVO INMUEBLE 
 
     */} 
 
    <TouchableHighlight onPress={()=> Actions.modal_nuevoInmueble() }> 
 
      <View style={styles.nav_boton_nuevoInmueble} > 
 
       <Icon name={'star'} size={22} color={'white'} style={styles.icono_inmueble}/> 
 
       <View style={{paddingLeft:15}}><Text style={styles.text_nav_boton_nuevoInmueble}>Nuevo Requerimiento</Text></View> 
 
      </View> 
 
     </TouchableHighlight> 
 

 
     {/* 
 
      ESTA ES LA DE BOTONES 
 
      */} 
 
     <View style={styles.nav_botones}> 
 
      
 
      
 
      <ScrollableTabView 
 
      style={{marginTop: 0,borderTopWidth:1, 
 
      borderTopColor:'#e8e8eb'}} 
 
      renderTabBar={()=><CaracteristicasTab backgroundColor='#f3f3f5'/>} 
 
      tabBarPosition='overlayTop' 
 
      tabBarBackgroundColor='white'> 
 

 
    <View tabLabel='Mis Requerimientos' style={{marginTop:40, height:width.height-200}}> 
 
    <ScrollView ref={(ref) => this.myScroll = ref} style={styles.container_inmuebles} scrollEventThrottle={16} onScroll={(e)=>{ 
 
           var windowHeight = Dimensions.get('window').height, 
 
           height = e.nativeEvent.contentSize.height, 
 
           offset = e.nativeEvent.contentOffset.y; 
 

 
          if (this.state.misRequerimientos.length<31) {scrollEnabled=false} 
 
           else if((windowHeight + offset >= height) && bandera_scroll!==1){ 
 
           // console.log("CArgando") 
 
           scrollEnabled=false; 
 
           this.pintarResultadosPagina(offset) 
 
          }else{ 
 
           scrollEnabled= false; 
 
          } 
 
          
 

 

 
         }}> 
 
       <View style={styles.separador_cantidad} > 
 
        <Text style={styles.texto_cantidad}>{this.state.texto_cantidad}</Text> 
 
       </View> 
 

 

 
{ 
 
         this.state.misRequerimientos.map((item,index)=>{ 
 
         
 
         var result= item; 
 
         // console.log(result) 
 
         
 
         var cuartos=0; 
 
         var banos=0; 
 
         var garajes=0; 
 

 

 

 
         if (result.cuartos=="" || result.cuartos==null || result.cuartos==undefined ) { 
 
         result.cuartos =cuartos 
 

 
         } 
 
         if (result.banos=="" || result.banos==null || result.banos==undefined ) { 
 
         result.banos =banos 
 

 
         } 
 
         if (result.garages=="" || result.garages==null || result.garages==undefined ) { 
 
         result.garages =garajes 
 

 
         } 
 

 
         
 

 
         if (typeof result=="string") { 
 
          return(<View key={index} style={{alignItems:'center',marginTop:0,borderBottomWidth:1,borderColor:'#e8e8eb'}}> 
 
            <Image style={styles.catimg2} source={require("../images/app-bg.png")} /> 
 
             </View>) 
 
         } 
 

 
         
 

 
         
 
          if(result.precio=="" || result.precio==null || result.precio==undefined){ 
 
           var precioMinimo = "$0" 
 
          }else{ 
 
           var precioMinimo = "$"+parseInt(result.precio).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") 
 
          } 
 
          
 
          if(result.precio_maximo=="" || result.precio_maximo==null || result.precio_maximo==undefined){ 
 
           var precioMaximo = "$0" 
 
          }else{ 
 
           var precioMaximo = "$"+parseInt(result.precio_maximo).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") 
 
          } 
 
          
 
         return <TouchableOpacity key={index} onPress={()=>{ Actions.detalle_misRequerimientos(result._id.$id)}}>  
 
            <Grid style={styles.grid_inmueble}> 
 
             
 
             <Col size={colText} style={{alignItems:'flex-start'}}> 
 
              <Row><Text style={styles.txt_inmueble} >Cod. Requerimiento: <Text style={{color:'#596471',fontFamily:'NunitoSans-Bold'}} >{result.codigo_requerimiento}</Text> </Text></Row> 
 
              <Row><Text style={styles.txt_inmueble} >{(result.barrio +", "+result.ciudad)}</Text></Row> 
 
              <Row><Text style={[styles.txt_inmueble,{fontFamily:'NunitoSans-Bold'}]} >{result.inmueble}</Text></Row> 
 
              <Row><Text style={styles.txt_inmueble} >{"Precio mínimo"}: 
 
              <Text style={{color:'#008dde',fontFamily:'NunitoSans-Bold'}} >{" "+precioMinimo} </Text> </Text> 
 
              </Row> 
 
              <Row><Text style={styles.txt_inmueble} >{"Precio máximo"}: 
 
              <Text style={{color:'#008dde',fontFamily:'NunitoSans-Bold'}} >{" "+precioMaximo} </Text> </Text> 
 
              </Row> 
 
              <Row><Text ></Text></Row> 
 
              <Row> 
 
               <Text style={[styles.txt_inmueble,{fontFamily:'NunitoSans-Bold'}]} ><Icon name={'crop'} 
 
                size={15} 
 
                color={'#596471'} 
 
                style={{marginLeft:10}} 
 
                />{result.area}m²</Text> 
 
               <Text style={[styles.txt_inmueble,{fontFamily:'NunitoSans-Bold',marginLeft:10}]} ><Icon name={'bed'} 
 
                size={15} 
 
                color={'#596471'} 
 
                style={{marginLeft:10}} 
 
                />{result.cuartos}</Text> 
 
               <Text style={[styles.txt_inmueble,{fontFamily:'NunitoSans-Bold',marginLeft:10}]} ><Icon name={'bathtub'} 
 
                size={15} 
 
                color={'#596471'} 
 
                style={{marginLeft:10}} 
 
                />{result.banos}</Text> 
 
               <Text style={[styles.txt_inmueble,{fontFamily:'NunitoSans-Bold',marginLeft:10}]} ><Icon name={'car2'} 
 
                size={15} 
 
                color={'#596471'} 
 
                style={{marginLeft:10}} 
 
                />{result.garages}</Text> 
 

 
              </Row> 
 
             </Col> 
 
            </Grid> 
 
           </TouchableOpacity> 
 

 
          //this.renderResult(item); 
 
          })} 
 

 
         {/*<ListView 
 
               dataSource={this.state.dataSource} 
 
               renderRow={(rowData) =>{ return this.renderResult(rowData) } } 
 
              pageSize={100} 
 
              /> */ } 
 
       
 

 
         <View style={styles.separador_cargar} > 
 
         <Text style={styles.texto_cargar}>{this.state.texto_cargar}</Text> 
 
         </View> 
 
     </ScrollView> 
 
     </View> 
 
     <View tabLabel='Favoritos' style={{marginTop:40, height:width.height-200}}> 
 
    {/* 
 
    <ScrollView ref={(ref2) => this.myScroll = ref2} style={styles.container_inmuebles} scrollEventThrottle={5000} onScroll={(e)=>{ 
 
           var windowHeight = Dimensions.get('window').height, 
 
           height = e.nativeEvent.contentSize.height, 
 
           offset = e.nativeEvent.contentOffset.y; 
 

 

 
          if((windowHeight + offset >= height) && bandera_scroll!==1){ 
 
           // console.log("CArgando") 
 

 
            
 
           if (this.state.misInmueblesFavoritos.length-1 < 30) { 
 
            scrollEnabled= false; 
 
            this.setState({texto_cargarFavoritos:"No hay más favoritos"}) 
 
           }else{ 
 
            this.pintarResultadosPaginaFavoritos(offset) 
 
            scrollEnabled=true; 
 
           } 
 
          }else{ 
 
           scrollEnabled= false; 
 
          } 
 

 

 
         }}> 
 
       <View style={styles.separador_cantidad} > 
 
        <Text style={styles.texto_cantidad}>{this.state.texto_cantidadFavoritos}</Text> 
 
       </View> 
 

 
{     
 
         this.state.misInmueblesFavoritos.map((item,index)=>{ 
 
         var result= item; 
 
         var cuartos=0; 
 
         var banos=0; 
 
         var garajes=0; 
 

 

 
         if (result.cuartos=="" || result.cuartos==null || result.cuartos==undefined ) { 
 
         result.cuartos =cuartos 
 

 
         } 
 
         if (result.banos=="" || result.banos==null || result.banos==undefined ) { 
 
         result.banos =banos 
 

 
         } 
 
         if (result.garages=="" || result.garages==null || result.garages==undefined ) { 
 
         result.garages =garajes 
 

 
         } 
 

 
         global.idFavorito= 0 
 

 
         // console.log(result) 
 
         if (typeof result=="string") { 
 
          return(<View key={index} style={{alignItems:'center',marginTop:0,borderBottomWidth:1,borderColor:'#e8e8eb'}}> 
 
            <Image style={styles.catimg2} source={require("../images/app-bg.png")} /> 
 
             </View>) 
 
         } 
 

 
         var imagen_placeholder; 
 
         if (result.imagen !== "") { 
 

 
          var t_img = result.imagen.replace('http://','https://') 
 
          imagen_placeholder={uri:t_img}; 
 
         }else{ 
 
          imagen_placeholder=require("../images/Imagen_no_disponible.png"); 
 
         } 
 
         if (result.imagen=="-large") { 
 
          imagen_placeholder=require("../images/Imagen_no_disponible.png"); 
 
         } 
 

 
         
 
         if (result.transaccion_inmueble) { 
 

 
          if (result.transaccion_inmueble=="Venta") { 
 
          var precio = "$"+parseInt(result.precio_venta).toLocaleString() 
 
          }else{ 
 
          var precio = "$"+parseInt(result.precio_renta).toLocaleString() 
 
          } 
 
         } 
 

 
         return <TouchableOpacity key={index} onPress={()=> {Actions.detalle_misInmuebles(result._id.$id),banderaDesdeFavoritos=1, idFavorito=result.id_favorito}}>  
 
            <Grid style={styles.grid_inmueble}> 
 
            <Col size={colImagen} style={{alignItems:'center'}}> 
 
             <Image style={styles.catimg} source={imagen_placeholder} /> 
 
             </Col> 
 
             <Col size={colText} style={{alignItems:'flex-start'}}> 
 
              <Row><Text style={styles.txt_inmueble} >Cod. Inmueble: <Text style={{color:'#596471',fontFamily:'NunitoSans-Bold'}} >{result.requerimiento}</Text> </Text></Row> 
 
              <Row><Text style={styles.txt_inmueble} >{(result.barrio +", "+result.ciudad)}</Text></Row> 
 
              <Row><Text style={[styles.txt_inmueble,{fontFamily:'NunitoSans-Bold'}]} >{result.inmueble}</Text></Row> 
 
              <Row><Text style={styles.txt_inmueble} >{result.transaccion_inmueble}: 
 
              <Text style={{color:'#008dde',fontFamily:'NunitoSans-Bold'}} >{" "+precio} </Text> </Text> 
 
              </Row> 
 
              <Row><Text ></Text></Row> 
 
              <Row> 
 
               <Text style={[styles.txt_inmueble,{fontFamily:'NunitoSans-Bold'}]} ><Icon name={'crop'} 
 
                size={15} 
 
                color={'#596471'} 
 
                style={{marginLeft:10}} 
 
                />{result.area}m</Text> 
 
               <Text style={[styles.txt_inmueble,{fontFamily:'NunitoSans-Bold',marginLeft:10}]} ><Icon name={'bed'} 
 
                size={15} 
 
                color={'#596471'} 
 
                style={{marginLeft:10}} 
 
                />{result.cuartos}</Text> 
 
               <Text style={[styles.txt_inmueble,{fontFamily:'NunitoSans-Bold',marginLeft:10}]} ><Icon name={'bathtub'} 
 
                size={15} 
 
                color={'#596471'} 
 
                style={{marginLeft:10}} 
 
                />{result.banos}</Text> 
 
               <Text style={[styles.txt_inmueble,{fontFamily:'NunitoSans-Bold',marginLeft:10}]} ><Icon name={'car2'} 
 
                size={15} 
 
                color={'#596471'} 
 
                style={{marginLeft:10}} 
 
                />{result.garages}</Text> 
 

 
              </Row> 
 
             </Col> 
 
            </Grid> 
 
           </TouchableOpacity> 
 

 
          //this.renderResult(item); 
 
          })} 
 
       */} 
 
         {/*<ListView 
 
               dataSource={this.state.dataSource} 
 
               renderRow={(rowData) =>{ return this.renderResult(rowData) } } 
 
              pageSize={100} 
 
              /> */ } 
 
       
 

 
         <View style={styles.separador_cargar} > 
 
         <Text style={styles.texto_cargar}>{this.state.texto_cargarFavoritos}</Text> 
 
         </View> 
 
     {/*</ScrollView>*/} 
 

 
      
 

 
     </View> 
 
     
 
    </ScrollableTabView> 
 

 
{/* 
 

 
    <Router> 
 
     
 
      <Scene 
 
      key="menu" 
 
      component={Menu} 
 
      hideNavBar={true} 
 
      title="Menu" 
 
      initial 
 
      
 
      /> 
 
      
 
     </Router> 
 

 
     */} 
 

 
     </View> 
 
     <DropdownAlert 
 
       ref={(ref) => this.dropdown = ref} 
 
       titleNumOfLines={0} 
 
       messageNumOfLines={0} 
 
       closeInterval={1800} 
 
       containerStyle={{ 
 
       backgroundColor: '#08223a', 
 
       }} 
 
       showCancel={false} 
 
      /> 
 

 
     </View> 
 
     
 
    ); 
 
    } 
 
    
 
}

ubicalaTabBar.js

import React from 'react'; 
 
import { 
 
    StyleSheet, 
 
    Text, 
 
    View, 
 
    TouchableOpacity, 
 
} from 'react-native'; 
 
//import Icon from 'react-native-vector-icons/Ionicons'; 
 
import Icon from 'react-native-vector-icons/UbicalaIcons'; 
 

 
const UbicalaTabBar = React.createClass({ 
 
    tabIcons: [], 
 

 
    propTypes: { 
 
    goToPage: React.PropTypes.func, 
 
    activeTab: React.PropTypes.number, 
 
    tabs: React.PropTypes.array, 
 
    }, 
 

 
    componentDidMount() { 
 
    this._listener = this.props.scrollValue.addListener(this.setAnimationValue); 
 
    }, 
 

 
    setAnimationValue({ value, }) { 
 
    this.tabIcons.forEach((icon, i) => { 
 
     const progress = Math.min(1, Math.abs(value - i)) 
 
     icon.setNativeProps({ 
 
     style_button: { 
 
      color: this.iconColor(progress), 
 
     } 
 
     }); 
 
    }); 
 
    }, 
 

 
    //color between rgb(59,89,152) and rgb(204,204,204) 
 
    iconColor(progress) { 
 
    const red = 0 + (8 - 0) * progress; 
 
    const green = 141 + (34 - 141) * progress; 
 
    const blue = 222 + (58 - 222) * progress; 
 
    return `rgb(${red}, ${green}, ${blue})`; 
 
    }, 
 

 
    render() { 
 
    //Menu perzonalizado para ubicala 
 
    // const menu = ["MLS","Inmuebles","Chat","Menu"] 
 
    const menu = ["MLS","Inmuebles","Menu"] 
 
    return <View style={[styles.tabs, this.props.style_button, ]}> 
 
     {this.props.tabs.map((tab, i) => { 
 
     return <TouchableOpacity key={tab} onPress={() => this.props.goToPage(i)} style={styles.tab}> 
 
      <Icon 
 
      name={tab} 
 
      icons={tab} 
 
      height={30} 
 
      size={22} 
 
      color={this.props.activeTab === i ? 'rgb(0,141,222)' : 'rgb(8,34,58)'} 
 
      ref={(icon) => { this.tabIcons[i] = icon; }} 
 
      /> 
 
      <Text style={[styles.text_menu]}>{menu[i]}</Text> 
 
     </TouchableOpacity>; 
 
     })} 
 
    </View>; 
 
    }, 
 
}); 
 

 
const styles = StyleSheet.create({ 
 
    tab: { 
 
    flex: 1, 
 
    alignItems: 'center', 
 
    justifyContent: 'center', 
 
    paddingBottom: 10, 
 
    }, 
 
    text_menu:{ 
 
    fontSize:10, 
 
    marginTop:5, 
 
    fontFamily:'NunitoSans-Light', 
 
    color:'#596471' 
 
    }, 
 
    tabs: { 
 
    height: 50, 
 
    flexDirection: 'row', 
 
    backgroundColor:'#f3f3f5', 
 
    paddingTop: 15, 
 
    borderWidth: 0, 
 
    borderTopWidth: 1, 
 
    borderTopColor:'#d6d6d8', 
 
    borderLeftWidth: 0, 
 
    borderRightWidth: 0, 
 
    borderBottomColor: 'rgba(0,0,0,0.05)', 
 
    }, 
 
}); 
 

 
export default UbicalaTabBar;

Quelle

2017-06-21 Andres Marin

Ich hatte gerade die Szenen neu zu gestalten und konvertieren sie in verschachtelte Szenen

<Scene key="tabbar" tabs={true} > 
        <Scene 
      key="main" 
      tabs 
      tabBarStyle={styles.tabBarStyle} 
      tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle} 
      hideNavBar={true} 
      > 
      <Scene 
       key="tab1" 
       title="MLS" 
       iconName='database' 
       icon={TabIcon} 
       initial 
       hideNavBar={true} 
      > 
       <Scene 
       key="tab1_1" 
       component={MLS} 
       title="Tab #1_1" 
       hideNavBar={true} 
       /> 
       <Scene 
       key="filtrar_busquedar" 
       component={FiltrarBusqueda} 
       hideNavBar={true} 
       hideTabBar={true} 
       title="FiltrarBusqueda" 


       /> 
       <Scene 
        direction="horizontal" 
        key="detalle_inmueble" 
        component={DetalleInmueble} 
        hideNavBar={true} 
        title="DetalleInmueble" 

       /> 


      </Scene> 
      <Scene key="tab2" title="Inmuebles" iconName='apartment' icon={TabIcon}> 
       <Scene 
       key="tab2_1" 
       component={Inmuebles} 
       title="Tab #2_1" 
       hideNavBar={true} 
       /> 

      </Scene> 
      <Scene key="tab3" title="Menú" iconName='icons2' icon={TabIcon} hideNavBar={true} > 
       <Scene 
        key="tab3_1" 
        component={Menu_Main} 
        title="Tab #3_1" 
        hideNavBar={true} 
        renderRightButton={() => <Text>Right</Text>} 
       /> 
       <Scene 
        key="tab3_2" 
        component={Requerimientos} 
        title="Tab #3_2" 
        hideNavBar={true} 
        renderRightButton={() => <Text>Right</Text>} 
       /> 
      </Scene>

Quelle

2017-06-27 14:50:02

Gemeinsame tabBar in spezifischen Komponenten reagieren-native-Router-Flux & reagieren-native

Antwort

Verwandte Themen