我的应用程序中有不同的视图，其中三个链接到TabBar，如下所示： menu.js
`
<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>
`
这是TabBar的一个例子： tabBarExample
当我按下＆＃34; Requerimientos＆＃34;它可以称之为＆＃34; Requerimientos＆＃34;查看但tabBar消失了。 这是该问题的屏幕截图： IssueExample
我怎么能让TabBar静态？我想让它在不同的视图或组件中显示我在tabBar元素中的任何位置。
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;
答案 0 :(得分：0)
我只需要重新制作场景并将它们转换为嵌套场景
<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>