标签: native-base
React Native <ListItem onPress = {...}> - 为什么这个函数在执行？
我刚刚开始围绕React Native,并使用Redux来管理我的UI组件state的NativeBase库和react-native-router-flux正在处理视图之间的导航.
目前我正在构建一个从一组guest对象创建的基本列表.该列表存储在Redux存储中,我可以访问它并相应地显示.列表中的每个项目都与数组guest内的项目相关联guests.我想使列表中的每个项目都可触摸,然后将相关guest对象作为属性传递给下一个视图以显示详细信息.
为此,我使用的onPress函数是与ListItem组件关联的标准函数(请参阅此处的 NativeBase文档).我还遵循了文档,react-native-router-flux并在组件本身之外定义了导航操作,以便ListItem在按下时调用它,而不是每次渲染时调用.
我的问题是,我发现onPress={goToView2(guest)}每次ListItem渲染时都会调用函数,而不是在ListItem按下时调用函数.
我确信它一定是简单的,我省略了.有什么建议？
View1.js - 显示以下初始列表的视图guests:
import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon,
Text, List, ListItem } from 'native-base';
import { connect } from 'react-redux';
import { Actions as NavigationActions } from 'react-native-router-flux'; …javascript react-native native-base react-native-router-flux
推荐指数
解决办法
查看次数
警告：forwardRef 渲染函数只接受两个参数：props 和 ref。您是否忘记使用 ref 参数？native base
启动新的 expo Native Base js 项目 Native Base 3.2.0 expo 4.12.0 每个包都很好，没有问题，运行项目时出现此错误：-
at node_modules/react/cjs/react.development.js:315:4 in printWarning
at node_modules/react/cjs/react.development.js:287:16 in error
at node_modules/react/cjs/react.development.js:1424:13 in forwardRef
at node_modules/native-base/src/components/composites/Skeleton/SkeletonCircle.tsx:12:20 in <global>
at node_modules/native-base/src/components/composites/Skeleton/index.tsx:3:0 in <global>
at node_modules/native-base/src/components/composites/index.ts:37:0 in <global>
at node_modules/native-base/src/index.tsx:7:0 in <global>
at App.js:2:0 in <global>
at node_modules/expo/AppEntry.js:3:0 in <global>
at http://packager.gi-qyq.anonymous.my-furniture.exp.direct/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:202324:3 in global code````
推荐指数
解决办法
查看次数
使用NativeBase无法看到卡体中的表单
我尝试使用下面的代码(组件Form内部Card)
<Card>
<CardItem header style={{ backgroundColor: 'lightgray' }}>
<Right>
<Text>This is Right align text </Text>
</Right>
<Badge primary>
<Text>step 1</Text>
</Badge>
</CardItem>
<CardItem>
<Body>
<Text style={{color: 'red'}}>{this.state.error}</Text>
<Form style={{alignSelf: 'stretch'}}>
<Item>
<Label>number:</Label>
<Input keyboardType="numeric"/>
</Item>
<Item>
<Label>date:</Label>
<Input />
</Item>
<Item>
<Label>number 2:</Label>
<Input keyboardType="numeric"/>
</Item>
<Item>
<Label>date 2:</Label>
<Input />
</Item>
<Button success block
>
<Text>submit</Text>
<Icon name='check' size={20} color="#FFFFFF"/>
</Button>
</Form>
</Body>
</CardItem>
</Card>
但在我的设备Nexus 7 Tab与android 5页脚不可见.您有什么建议可以找到问题并修复它吗？我正在使用NativeBase 2.0.12和React-Native 0.42.0.
我想这可能与这个问题有关:https …
android reactjs react-native react-native-android native-base
推荐指数
解决办法
查看次数
React Native 中的浮动自动完成
我正在寻找带有浮动建议框的自动完成文本输入。
请建议我任何可以帮助制作相同组件的包名称。
我尝试了许多软件包但没有任何帮助，有些正在推动下一个字段，有些则不支持单击离开侦听器。
reactjs react-native react-native-android native-base react-native-paper
推荐指数
解决办法
查看次数
自定义本机基础的选项卡
我需要在我的react本机应用程序中自定义选项卡(更改其背景颜色),如图中所示 
我已经尝试了这个, style={{ backgroundColor: '#C0C0C0' }}但我一直在获得默认主题.
推荐指数
解决办法
查看次数
Android上的“来自JS字段大小的格式错误的调用不同”错误-react-native
我正在使用React-Native.Android Picker组件遇到了麻烦。我Picker从Native-Base图书馆使用。这是我的Picker代码及其父视图。
<View style={{height: 40, marginTop: 20}}>
<Label style={{fontWeight: 'bold', color: '#d7d7d7'}}>Phone</Label>
<View style={{flexDirection: 'row',width: '100%',borderWidth: 1, borderColor: '#d7d7d7', height: 40}}>
<View style={{flexDirection: 'row',width: '30%', height: '100%' ,backgroundColor: '#d7d7d7', alignItems: 'center'}}>
<Picker style={{width: 100, height: '100%', marginLeft: 5}}
selectedValue={this.state.selectedCountry}
onValueChange={(value)=>this.onCodeChanged(value)}>
<Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
<Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+90.png')}/> +90</Text>} value="+90"/>
<Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
<Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+44.png')}/> +44</Text>} …推荐指数
解决办法
查看次数
无法识别的字体家族离子
我按照NativeBase Docs中的设置说明运行rnpm link.我收到此错误:
无法识别的字体系列ionicons
也由Xcode检查,字体已经处于构建阶段.我错过了什么？
推荐指数
解决办法
查看次数
React-Native按钮对齐中心
我正在使用原生基本按钮我想对齐屏幕中心的按钮我试过这个:
<Container style={{flex:1,
flexDirection:'row',
alignItems:'center',
justifyContent:'center',}}>
<Form style={{}}>
<Item last>
<Input placeholder='Username'
style={{color:'white'}}/>
</Item>
<Item last>
<Input placeholder="Password"
style={{color:'white'}} />
</Item>
<Button style={{width:170,backgroundColor:'#99004d',marginTop:20,}}>
<Text style={{marginLeft:50}}>Login</Text>
</Button>
<Text style={{color:'white'}}>{this.props.Name}</Text>
</Form>
</Container>
但它减少了输入字段的大小我得到的结果如下:
推荐指数
解决办法
查看次数
React Native - NativeBase组件在iOS上不占用全宽
在使用NativeBase构建的iOS版本的本机应用程序中,除非给出特定的宽度,否则一切都太瘦了.见下图.我给页眉和页脚的宽度为100%,所以它很好,但我没有为输入做到这一点,他们太瘦了.当没有宽度时,页眉和页脚是瘦的.
码:
import React from 'react'
import {
Container,
Header,
Form,
Item,
Input,
Label,
Content,
Footer,
FooterTab,
Button,
Left,
Right,
Body
} from 'native-base'
import { Text, Image } from 'react-native'
export const Volcalc = () => {
return (
<Container style={styles.container}>
<Header style={styles.header}>
<Left>
<Image resizeMode={Image.resizeMode.contain} style={styles.thumbnail} source={require('./img/logo_red_nowords.png')} />
</Left>
<Body>
</Body>
<Right />
</Header>
<Content>
<Form>
<Item stackedLabel bordered >
<Label>height</Label>
<Input />
</Item>
<Item stackedLabel >
<Label>width</Label>
<Input />
</Item>
</Form>
</Content>
<Footer >
<FooterTab style={styles.footer}>
<Button …react-native react-native-android native-base react-native-ios
推荐指数
解决办法
查看次数
ios键盘覆盖了位于屏幕底部的输入
ios键盘覆盖了位于屏幕底部的输入。如何解决这个问题？
这是代码。
<Content style={styles.content}>
<Form>
<Item style={{borderBottomColor:'#42e8f4'}}>
<Icon active name='mail' style={{color: '#42e8f4'}} />
<Input placeholder='Email'placeholderTextColor= '#42e8f4' style={{color:'#0dc49d'}}/>
</Item>
<Item style={{ borderBottomColor:'#42e8f4'}}>
<Icon active name='lock' style={{color: '#42e8f4'}} />
<Input secureTextEntry={true} placeholder='Password'placeholderTextColor= '#42e8f4' style={{color:'#42e8f4'}}/>
</Item>
</Form>
<ListItem style={{borderBottomWidth:0,borderTopWidth:0,borderBottomColor:'#42e8f4'}}>
<Button transparent onPress={() => this.props.navigation.navigate("Signup")}>
<Text style={{color:'#42e8f4'}}>Create Account</Text>
</Button>
<Button transparent onPress={() => this.props.navigation.navigate("Forgetpass")}>
<Text style={{color:'#42e8f4'}}>Forget Password</Text>
</Button>
</ListItem>
<Button full
style={{backgroundColor:'#42e8f4'}}
onPress={() => this.props.navigation.navigate("Welcome")}>
<Text style={{color: '#FFF'}}>Sign In</Text>
</Button>
</Content>
const styles = {
content:{
position:'absolute',
bottom:10,
left:0,
right:0
},
}
我正在使用Native-Base。如何解决这个问题？
react-native react-native-android native-base react-native-ios
推荐指数
解决办法
查看次数