个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我的应用程序中有不同的 View ，其中三个链接到 TabBar，如下所示:菜单.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
当我按下“Requerimientos”touchableHighlight 时，它会调用“Requerimientos” View ，但 tabBar 会消失。这是该问题的屏幕截图: IssueExample
如何使 TabBar 静态？我希望它显示在 tabBar 元素之外的不同 View 或组件中。
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;最佳答案
我只需重新制作场景并将它们转换为嵌套场景
<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>
关于javascript - 特定组件中的常用标签栏react-native-router-flux和react-native，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44687144/
24
4
0
所以我使用一个带有整个 block 的标签作为链接，它是一个产品展示，所以你点击它会转到产品页面。现在我创建了一个标签作为链接到购物车页面的按钮。所以我让它工作，但是当我点击购物车按钮时，两个页面都会
根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？ 是吗 stackoverflow 或 stackoverflow 谢谢 最佳答案 根据网络标准，您不能将 block 元素放入内
在Java中它是这样写的..当我移植这段代码时...意识到没有这样的东西 break 和continue . 我知道这些命令没有包含在内，因为在使用带有命令的 goto 时必须有一种更简洁的方法来执
我们有一个相当标准的发布过程，使用 Visual Source Safe 在发布之前标记构建。这允许我们在出现任何问题时从该标签中获取，并在需要更改时使用它进行分支。 我们有几个不同的项目，并且总是使
我必须创建一个搜索内容，其中包含搜索框、标题和段落描述。默认情况下，描述被禁用，当我输入一些与描述文本匹配的文本时，描述段落标签应该打开。一些匹配的演示是这样的: [ fiddle ][1] 但默认情
我一直在阅读有关 的文档标签，我似乎无法理解它与简单地使用 有何不同那是 display: none; 文档:template tag 例子 对比 例子
我需要一个脚本来复制当开关按钮打开时标记，当开关按钮关闭时删除标记。我需要一个简单的方法。这是开关按钮: 我试过这个: var change
JSF 是一个 MVC 框架，但我很困惑为什么我们已经有了这么多 HTML 标签还需要 JSF 标签。毫无疑问，JSF 简化了很多事情。我想进一步了解 JSF 中的模型 View 和 Controll
我在这个 website 上看到了那些 html 代码: Homepa
我添加了 photoswipe 插件，可以使用 搜索我的所有照片。标签，如果点击，照片就会变成全屏。我让它工作了，但现在我的导航栏(有 标签)在点击时会触发 photoswipe 插件。 在 ph
标签
我正在尝试截断显示自 的文本标签，但它不工作。我将样式应用于其他标签样式并且它确实有效(我看到的示例中没有一个使用 标签)。我想知道是否有人可以向我解释为什么会这样(我不是最擅长 HTML/CSS
HTML 是这样的: Menu 1 Menu 2 Sub menu 2
我可以更改 TextInputLayout 的位置 float 标签(底部 float 标签)吗？我需要为波纹管 float 标签设置正确的位置。 最佳答案 我解决了我的问题，这是我的 xml:
我的代码是 printMsg : function(data) { $("#message").html(data.bodyText); ... } 这里 data.body
我是 Scrapy 和 Xpath 的初学者，我正在寻找解析具有以下结构的网站 cat1 value1 value2
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及
我必须从 xml 中解析数据。这是我的 xml- 或者它的 url 是:http://mobileecommerce.site247365.com/admin/catdata.xml News f
如何创建应该允许多行数据的标记。不要说使用textarea标签。我知道，但我只想 标记因为标签具有 value 属性。所以当我从 xml 文件获取值时，我应该使用 jquery 语法动态获取.. 最佳
我有一个页面使用我定义的某些样式。 在同一页面上，我刚刚导入了一个使用自己样式的外部 jQuery 插件，例如，包括 。被我自己覆盖的标签样式。 如何确保我的样式表中的样式不会覆盖 jQuery 插件
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
我是一名优秀的程序员,十分优秀！