react-native - React Native 和原生基础编辑数据页面
问题描述
我正在尝试创建一个可以编辑“租户”数据的页面。
这是我的页面:
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';
import NavigationService from '../NavigationService';
class TenantDetails extends Component {
render() {
const { navigation } = this.props;
return (
<Container>
<Header>
<Left>
<Button
transparent
onPress={() => NavigationService.navigate('Tenants')}
>
<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;
谢谢。我遇到了右箭头未向右对齐的问题(下图)。另外,如何将 更改为具有标签和值(我有名字的地方)?所以当我点击它时,我可以打开它。模态编辑值
解决方案
这是您的代码的一部分。我添加Left
标签:
<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>
对于模态问题,您可以react-native-modal
通过npm install --save react-native-modal
.
环绕CardItem
你需要 onPress 的按钮。然后调用 onPress,这是一种改变模态可见性状态的方法。像这样的代码:
<Modal
style={{ margin: 0 }}
isVisible={this.state.modalVisible}
/>
为了改变你的领域,比如name
等,使用组件的状态
推荐阅读
- php - 在 Woocommerce Admin 产品列表中的产品类别过滤器之后添加自定义分类过滤器
- node-config - Node-config custom-environment-variables 不选择 Docker 环境变量
- python - OSError: [WinError 1450] 系统资源不足,无法通过 Anaconda 在 Python 中使用 Selenium 完成请求的服务
- javascript - 动态更改 HTML 5 自动播放的视频源
- jupyter-notebook - KeyError:一个环境中的jupyter笔记本中的“allow_remote_access”
- apache - 按列的值拆分 csv 文件 - Apache Nifi
- javascript - jQuery html5 音频移动后退或前进快捷方式
- sql - 带有提交的 Airflow + pandas read_sql_query()
- python - 错误的“if”条件输出
- c++ - 将 const char 转换为字符串不起作用