react-native - 反应原生替换 LisItem 到?
问题描述
我正在尝试创建一个带有列表的项目,但我读到 ListItem 已被弃用。我该如何更换它?
使用原生组件更新后的我的页面
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import {
Container, Header, Content, Card,
CardItem, Text, Icon, Right,
Left, Body, Title, Button }
from 'native-base';
import { Avatar } from 'react-native-elements';
class TenantDetails extends Component {
render() {
const { navigation } = this.props;
return (
<Container>
<Header>
<Left>
<Button transparent>
<Icon name='arrow-back' />
</Button>
</Left>
<Body>
<Title>My Name</Title>
</Body>
<Right />
</Header>
<Content>
<View style={styles.userRow}>
<View style={styles.userImage}>
<Avatar
rounded
size="large"
source={{
uri: 'https://myirent.com/rent/appImg/person-icon.png',
}}
/>
</View>
<View>
<Text style={{ fontSize: 16 }}>Jonh Test</Text>
<Text
style={{
color: 'gray',
fontSize: 16,
}}
>
joinh@gmail.com{'\n'}xxx-xxx-xxxx
</Text>
</View>
</View>
<Card>
<View style={styles.containerTextHeader}>
<Text style={styles.infoTextHeader}>Tenant Details</Text>
</View>
<CardItem>
<Icon active name="logo-googleplus" />
<Text>First Name</Text>
<Right>
<Icon name="arrow-forward" />
</Right>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
scroll: {
backgroundColor: 'white',
},
userRow: {
alignItems: 'center',
flexDirection: 'row',
paddingBottom: 8,
paddingLeft: 15,
paddingRight: 15,
paddingTop: 6,
},
userImage: {
marginRight: 12,
},
listItemContainer: {
height: 55,
borderWidth: 0.5,
borderColor: '#ECECEC',
},
containerTextHeader: {
paddingTop: 20,
paddingBottom: 12,
backgroundColor: '#F4F5F4',
},
infoTextHeader: {
fontSize: 16,
marginLeft: 20,
color: 'gray',
fontWeight: '500',
},
});
export default TenantDetails;
谢谢。我遇到了右箭头未向右对齐的问题(下图)。另外,如何将其更改为具有标签和值?所以当我点击它时,我可以打开它。模态编辑值
我的屏幕:
解决方案
ListView 已弃用。没有列表项。使用 list 和 list item of 的人native base
都是不错的选择。这是一个例子
import React, { Component } from 'react';
import { Container, Header, Content, List, ListItem, Text } from 'native-base';
export default class ListExample extends Component {
render() {
return (
<Container>
<Header />
<Content>
<List>
<ListItem>
<Text>Simon Mignolet</Text>
</ListItem>
<ListItem>
<Text>Nathaniel Clyne</Text>
</ListItem>
<ListItem>
<Text>Dejan Lovren</Text>
</ListItem>
</List>
</Content>
</Container>
);
}
}
您可以通过以下命令安装 native-base 包:
npm install native-base --save
或者如果您使用 yarn:
yarn add native-base
Native base 是一个免费的开源 UI 组件库,用于 React Native 为 iOS 和 Android 平台构建原生移动应用程序。NativeBase 还支持 2.4.1 版本的 Web。
推荐阅读
- c - 这个按位运算符的位置会改变行为吗?
- batch-file - 在Windows批处理中将CRLF文件转换为LF
- python - 尝试附加到 Excel 工作表时,我不断收到意外的数据类型错误
- xamarin - 用于选项卡式页面的 Xamarin Forms iOS 自定义渲染器
- excel - 合并多个excel公式时如何删除空格
- html - 通过此网站布局为我指明正确的方向
- qt - 使用 Qt Creator 配置 GNU Radio 和 UHD 项目
- influxdb - outflux 参数的语义 --output-conn
- java - Spring Data JPA 原生查询中的变量
- regex - 为什么将代码作为函数调用比在 Clozure Common lisp 中直接调用需要更长的时间?