Question

我正在尝试创建一个带有列表的项目，但我读到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;

谢谢。我遇到了向右箭头未与右对齐的问题（下图）。另外，如何更改来具有标签和值？因此，当我单击它时，我可以打开。模态编辑值

我的屏幕：

Answer 1

不推荐使用ListView。没有ListItem。凡使用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>
        );
      }
    }

result in ios

您可以通过以下命令安装基于本机的软件包： npm install native-base --save 或者，如果您使用纱线： yarn add native-base

Native base是一个免费的开源UI组件库，用于React Native来为iOS和Android平台构建本机移动应用程序。 NativeBase还支持2.4.1版本的Web。

Answer 2

由于您在我的上一个答案中发表了评论，因此我将发布此答案。

对于右对齐箭头图标，只需用Left标签将google plus换行即可。

<Card>
  <View style={styles.containerTextHeader}>
       <Text style={styles.infoTextHeader}>Tenant Details</Text>
 </View>
 <CardItem>
     <Left>
       <Icon active name="logo-googleplus" />
       <Text>First Name</Text>
     </Left>
     <Right>
       <Icon name="arrow-forward" />
     </Right>
 </CardItem>
</Card>

要在按钮上定义点击功能，您可以通过任何按钮来包装卡片项目，例如：

<TouchableOpacity onPress={() => //your function}
    <CardItem>
    </CardItem>
</TouchableOpacity>

反应原生替换LisItem到？

2 个答案: