ReactNative自定义组件3-个人资料页面

最新推荐文章于 2024-05-23 09:21:57 发布
最新推荐文章于 2024-05-23 09:21:57 发布
阅读量382 收藏
点赞数 1
文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47898198/article/details/120584613
版权

ReactNative自定义组件3-个人资料页面

导言

 最近做app，记录下自己写的组件

组件：个人资料页面

import React, { Component, useState }  from 'react';
import {StyleSheet, Text, View, Dimensions, Image, Button, TouchableOpacity, ImageBackground, TextInput, ScrollView} from 'react-native';
import PropTypes from 'prop-types';
import {BackgroundImage} from 'react-native-elements/dist/config';
// import {Input} from 'react-native-elements';
import {pxToDp} from './styleKits';

const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);

export default class PeopleInformation extends Component {
   constructor() {
       super();
       this.state = {
           isEditting:             false,

           name:                   '胡诗杰',
           head:                   require('./pic/head.jpg'),
           phoneNumber:            '13849489395',
           carType:                '奔驰',
           carMode:                '豪华型',
           emergencyPhoneNumber:   '17398508012',
           licensePlateNumber:     '豫8888',
           carColor:               '黑',

           onHeadPress:            PropTypes.func,
           onEditInformation:      PropTypes.func,
           onSavePress:            PropTypes.func,
           onCancelPress:          PropTypes.func,

           formPhoneNumber:            '13849489395',
           formCarType:                '奔驰',
           formCarMode:                '豪华型',
           formEmergencyPhoneNumber:   '17398508012',
           formLicensePlateNumber:     '豫8888',
           formCarColor:               '黑',
       }
       this.headPress = this.headPress.bind(this);
       this.editInformationPress = this.editInformationPress.bind(this);
       this.savePress = this.savePress.bind(this);
       this.cancelPress = this.cancelPress.bind(this);
   }

   headPress() {
       alert('function is null')
   };

   editInformationPress() {
       this.setState({
           isEditting:             true,
       })
   };

   savePress() {
       this.setState({
           isEditting:             false,

           phoneNumber:            this.state.formPhoneNumber == '' ? this.state.phoneNumber : this.state.formPhoneNumber,
           carType:                this.state.formCarType == '' ? this.state.carType : this.state.formCarType,
           carMode:                this.state.formCarMode == '' ? this.state.carMode : this.state.formCarMode,
           emergencyPhoneNumber:   this.state.formEmergencyPhoneNumber == '' ? this.state.emergencyPhoneNumber : this.state.formEmergencyPhoneNumber,
           licensePlateNumber:     this.state.formLicensePlateNumber == '' ? this.state.licensePlateNumber : this.state.formLicensePlateNumber,
           carColor:               this.state.formCarColor == '' ? this.state.carColor : this.state.formCarColor,
       })
   };

   cancelPress() {
       this.setState({
           isEditting:                 false,

           formPhoneNumber:            this.state.phoneNumber,
           formCarType:                this.state.carType,
           formCarMode:                this.state.carMode,
           formEmergencyPhoneNumber:   this.state.emergencyPhoneNumber,
           formLicensePlateNumber:     this.state.licensePlateNumber,
           formCarColor:               this.state.carColor,
       })
   };

   render() {
       return(
           <View style={{
               height: '100%',
               alignItems: 'center',
               backgroundColor: '#BFD0DA',
           }}>
               <View style={{
                   height: pxToDp(165),
                   width: '95%',
                   backgroundColor: 'white',
                   marginTop: '5%',
                   padding: 12,
                   elevation: 5,
                   borderRadius: 10,
                   shadowColor: '#303133',
               }}>
                   <View style={{
                       height: '55%',
                       width: '80%',
                       marginLeft: '10%',
                       flexDirection: 'row',
                   }}>
                       <Image source={this.state.head} style={{
                           height: pxToDp(80),
                           width: pxToDp(80),
                           borderRadius: 120,
                       }}/>
                       <View style={{
                           marginTop: '8%',
                           marginLeft: '5%',
                       }}>
                           <Text style={{
                               color: '#909399',
                           }}>{'姓名：' + this.state.name}</Text>
                           <Text style={{
                               color: '#909399',
                           }}>{'手机号：' + this.state.phoneNumber}</Text>
                       </View>
                   </View>
                   <View style={{
                       width: '80%',
                       height: 1,
                       marginTop: '5%',
                       alignSelf:'center',
                       opacity: 0.3,
                       backgroundColor: '#606266',
                   }} />
                   <View style={{
                       marginTop: '5%',
                       alignSelf: 'center',
                       flexDirection: 'row',
                   }}>
                       <TouchableOpacity
                           onPress={this.headPress}
                           style={{
                               alignSelf: 'center',
                               flexDirection: 'row',
                       }}>
                           <Image source={require('./pic/points.png')} style={{
                               height: pxToDp(20),
                               width: pxToDp(20),
                           }}/>
                           <Text style={{
                               marginLeft: '3%',
                               color: '#409EFF'
                           }}>{'更改头像'}</Text>
                       </TouchableOpacity>
                       <TouchableOpacity
                           onPress={this.editInformationPress}
                           style={{
                               marginLeft: '15%',
                               alignSelf: 'center',
                               flexDirection: 'row',
                       }}>
                           <Image source={require('./pic/where.png')} style={{
                               height: pxToDp(20),
                               width: pxToDp(20),
                           }}/>
                           <Text style={{
                               marginLeft: '3%',
                               color: '#409EFF'
                           }}>{'编辑信息'}</Text>
                       </TouchableOpacity>
                   </View>
               </View>
               <View style={{
                   height: '70%',
                   width: '95%',
                   padding: 10,
                   marginTop: '5%',
                   elevation: 5,
                   borderRadius: 10,
                   shadowColor: '#303133',
                   backgroundColor: 'white',
               }}>
                   <ScrollView style={{
                       height: 100,
                       overflow: 'scroll',
                   }}>
                       <View style={{
                           flexDirection: 'row',
                           alignItems: 'center',
                       }}>
                           <Image source={require('./pic/where.png')} style={{
                               height: pxToDp(20),
                               width: pxToDp(20),
                               marginLeft: '5%',
                           }}/>
                           <Text>{'手机号:'}</Text>
                           <TextInput
                               placeholder={this.state.formPhoneNumber}
                               editable={false}
                               selectionColor={'#409EFF'}
                               onChangeText={
                                   text => this.setState({
                                       formPhoneNumber: text
                                   })
                               }
                               value={this.state.formPhoneNumber}
                               style={{
                                   width: '60%',
                               }}
                           />
                       </View>
                       <View style={{
                           width: '90%',
                           height: 1,
                           alignSelf:'center',
                           opacity: 0.3,
                           backgroundColor: '#606266',
                       }} />
                       <View style={{
                           flexDirection: 'row',
                           alignItems: 'center',
                       }}>
                           <Image source={require('./pic/where.png')} style={{
                               height: pxToDp(20),
                               width: pxToDp(20),
                               marginLeft: '5%',
                           }}/>
                           <Text>{'汽车车型:'}</Text>
                           <TextInput
                               placeholder={this.state.formCarMode}
                               editable={false}
                               selectionColor={'#409EFF'}
                               onChangeText={
                                   text => this.setState({
                                       formCarMode: text
                                   })
                               }
                               value={this.state.formCarMode}
                               style={{
                                   width: '60%',
                               }}
                           />
                       </View>
                       <View style={{
                           width: '90%',
                           height: 1,
                           alignSelf:'center',
                           opacity: 0.3,
                           backgroundColor: '#606266',
                       }} />
                       <View style={{
                           flexDirection: 'row',
                           alignItems: 'center',
                       }}>
                           <Image source={require('./pic/where.png')} style={{
                               height: pxToDp(20),
                               width: pxToDp(20),
                               marginLeft: '5%',
                           }}/>
                           <Text>{'汽车型号:'}</Text>
                           <TextInput editable={this.state.isEditting}
                                      selectionColor={'#409EFF'}
                                      onChangeText={
                                          text => this.setState({
                                              formCarType: text
                                          })
                                      }
                                      value={this.state.formCarType}
                                      style={{
                                          width: '60%',
                                      }}
                           />
                       </View>
                       <View style={{
                           width: '90%',
                           height: 1,
                           alignSelf:'center',
                           opacity: 0.3,
                           backgroundColor: '#606266',
                       }} />
                       <View style={{
                           flexDirection: 'row',
                           alignItems: 'center',
                       }}>
                           <Image source={require('./pic/where.png')} style={{
                               height: pxToDp(20),
                               width: pxToDp(20),
                               marginLeft: '5%',
                           }}/>
                           <Text>{'紧急联系人:'}</Text>
                           <TextInput
                               placeholder={this.state.formEmergencyPhoneNumber}
                               editable={this.state.isEditting}
                               selectionColor={'#409EFF'}
                               onChangeText={
                                   text => this.setState({
                                       formEmergencyPhoneNumber: text
                                   })
                               }
                               value={this.state.formEmergencyPhoneNumber}
                               style={{
                                   width: '60%',
                               }}
                           />
                       </View>
                       <View style={{
                           width: '90%',
                           height: 1,
                           alignSelf:'center',
                           opacity: 0.3,
                           backgroundColor: '#606266',
                       }} />
                       <View style={{
                           flexDirection: 'row',
                           alignItems: 'center',
                       }}>
                           <Image source={require('./pic/where.png')} style={{
                               height: pxToDp(20),
                               width: pxToDp(20),
                               marginLeft: '5%',
                           }}/>
                           <Text>{'车辆牌照:'}</Text>
                           <TextInput
                               placeholder={this.state.formLicensePlateNumber}
                               editable={false}
                               selectionColor={'#409EFF'}
                               onChangeText={
                                   text => this.setState({
                                       formLicensePlateNumber: text
                                   })
                               }
                               value={this.state.formLicensePlateNumber}
                               style={{
                                   width: '60%',
                               }}
                           />
                       </View>
                       <View style={{
                           width: '90%',
                           height: 1,
                           alignSelf:'center',
                           opacity: 0.3,
                           backgroundColor: '#606266',
                       }} />
                       <View style={{
                           flexDirection: 'row',
                           alignItems: 'center',
                       }}>
                           <Image source={require('./pic/where.png')} style={{
                               height: pxToDp(20),
                               width: pxToDp(20),
                               marginLeft: '5%',
                           }}/>
                           <Text>{'车辆颜色:'}</Text>
                           <TextInput
                               placeholder={this.state.formCarColor}
                               editable={this.state.isEditting}
                               selectionColor={'#409EFF'}
                               onChangeText={
                                   text => this.setState({
                                       formCarColor: text
                                   })
                               }
                               value={this.state.formCarColor}
                               style={{
                                   width: '60%',
                               }}
                           />
                       </View>
                       <View style={{
                           width: '90%',
                           height: 1,
                           alignSelf:'center',
                           opacity: 0.3,
                           backgroundColor: '#606266',
                       }} />
                   </ScrollView>
                   <View style={{
                       height: '10%',
                   }}></View>
                   <View style={{
                       flexDirection: 'row',
                       alignItems: 'center',
                   }}>
                       <TouchableOpacity
                           onPress={this.savePress} style={{
                           height: pxToDp(40),
                           width: pxToDp(100),
                           marginLeft: '14%',
                           flexDirection: 'row',
                           alignItems: 'center',
                           display: this.state.isEditting?'flex':'none',
                       }}>
                           <Image source={require('./pic/points.png')} style={{
                               marginLeft: '20%',
                               height: pxToDp(20),
                               width: pxToDp(20),
                           }}/>
                           <Text style={{
                               color: '#409EFF',
                           }}>{'保存'}</Text>
                       </TouchableOpacity>
                       <TouchableOpacity
                           onPress={this.cancelPress} style={{
                           height: pxToDp(40),
                           width: pxToDp(100),
                           marginLeft: '14%',
                           flexDirection: 'row',
                           alignItems: 'center',
                           display: this.state.isEditting?'flex':'none',
                       }}>
                           <Image source={require('./pic/points.png')} style={{
                               marginLeft: '20%',
                               height: pxToDp(20),
                               width: pxToDp(20),
                           }}/>
                           <Text style={{
                               color: '#409EFF',
                           }}>{'取消'}</Text>
                       </TouchableOpacity>
                   </View>
                   <View style={{
                       height: '5%',
                   }}></View>
               </View>
           </View>
       )
   }
};

调用：个人资料页面


import React from 'react';
import {StyleSheet, Text, View, Dimensions, Image, Button} from 'react-native';
import PeopleInformation from './PeopleInformation';

const App = () => {
 return (
     <View>
         <PeopleInformation/>
     </View>
 );
};

export default App;

在这里插入图片描述在这里插入图片描述在这里插入图片描述

注意

该文章仅个人学习使用，欢迎大家一起交流学习

宇智波盆
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
myProfile:我正在用React开发一个个人资料页面（开发中）=> https
04-27
Material Kit React是一个免费的Material-UI套件，其灵感来自Google的材料设计，具有新颖的设计。 您要求它，所以我们建造了它。 很高兴以易于使用和精美的组件集向您介绍材料概念。 与Material-UI元素的重新样式化一起，您将找到三个完全编码的示例页面，以帮助您设计下一个项目。 Material Kit React利用光线，表面和运动。 它使用了故意的颜色选择，边缘到边缘的图像和大规模的印刷术。 总体布局类似于遵循多个不同层次的纸页，因此深度和顺序很明显。 导航主要停留在左侧，而动作则停留在右侧。 这种新设计具有一些元素，这些元素是有关墨水和纸张以及物体和材料在现实生活中相互作用方式的研究成果。 结果是一组漂亮且一致的元素，可以帮助您开始下一个项目。 如果您希望为Android应用程序创建Web外观并且需要保持一致，那么Material Kit Reac
React-Native个人信息界面
weixin_34192732的博客
01-24 538
最近在做一个小练习项目，用户登陆后需要跳转到用户登录信息界面，加班半个小时终于将界面的布局搞定。接触Rect－Native也有一段时间了，以前没有做过ios，只做过android，就布局和开发效率上来说，react－native的给我的感觉是开发效率要大大高于android的。下面是具体的代码： 1 import React from 'react-native' 2 impo...
React Native商城项目实战10 - 个人中心中间内容设置
08-24 1541
1，新建一个MineMiddleView.js，专门用于构建中间的内容 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react'; import { AppRegistry, Style
react项目实战五 个人中心页面
TH226的专栏
10-22 2150
新增库依赖 npm install browser-cookies --save 进行浏览器cookie的操作 个人中心页面 页面的开发没有什么难度，直接使用antd-mobile的组件即可 src\component\usercenter\usercenter.js 其中需要注意的是，个人中心页面的退出登录按钮，在退出登录的时候，同时清除cookie中的用户id。以及redux中的数据 lo...
React项目实战之租房app项目（十）个人中心模块&登录访问控制&项目打包部署上线
小陈工的博客
02-10 807
到此为止，我们的项目就已经全部开发完成了，由于篇幅有限，我们只展示了一部分的业务逻辑的编写，在真实的生产环境中，还要根据公司的需求去灵活运用这些知识。
王学岗ReactNative开发6——项目实战二之个人中心与引导页面与我的页面与闪屏页面跳转到主页面
qczg_wxg的博客
04-07 495
第一：我们看下个人中心页面 这是mine.js /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow * @lint-ignore-every XPLATJSCOPYRIGHT1 */ import React, {Component} from 'r...
React Native项目实战之搭建美团个人中心界面
xiangzhihong8的专栏
05-28 6207
在很多app应用型APP中，个人中心往往会单独出一个模块，而对于刚入门React Native的朋友来说，怎么去实现一些静态的页面，并且怎么着手实现，怎么分层，怎么去实现这个架构，我想是很基础的（ps，本人新书，《React Native实战经典》定义国庆前后出版，欢迎大家捧场）。 首先，看一下实现的效果： 项目讲解首先，这是一个纯静态的页面，包括顶部的个人介绍页面，已经下面的一个扩展页面。而下
React Native自定义标题栏组件的实现方法
08-31
今天讲一下如何实现自定义标题栏组件，我们都知道RN有一个优点就是可以组件化，在需要使用该组件的地方直接引用并传递一些参数就可以了，这种方式确实...对React Native自定义标题栏组件的实现方法感兴趣的朋友参考下
ReactNative通用组件smartbarreact-native-smartbar.zip
07-19
ReactNative 跨平台通用 Tabbar，实现了官方所欠缺的 Android 与 iOS 兼容 Tabbar 组件。包含底部 BAR 文字与图片排版显示，任何页面控制隐藏显示，跳转至任意路由等 API。兼容自定义 STYLE。Get StartedDEMOtoggle ...
React Native使用Modal自定义分享界面的示例代码
08-28
本篇文章主要介绍了React Native使用Modal自定义分享界面的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
login-reactnative:使用React Native的简单登录页面
05-09
该项目是通过。 您将在下面找到有关执行常见任务的信息。 本指南的最新版本可。 目录 构建世博会的“独立”应用 从Create React Native App弹出 构建依赖关系（Xcode和Android Studio） 我应该使用ExpoKit吗？ 故障排除 联网 iOS模拟器无法打开 QR码不扫描 更新到新版本 您只需要很少（理想情况下永远不需要）更新全局安装的create-react-native-app 。 更新应用程序的react-native-scripts依赖关系应该像更改package.json的版本号并重新安装项目的依赖关系一样简单。 升级到React Native的新版本需要更新react-native ， react和expo软件包版本，并在app.json设置正确的sdkVersion 。 有关软件包版本兼容性的最新信息，请参见版本控制指南。 可用脚本
react-native-hybrid-storybook：在浏览器中展示您的React本机组件
02-03
该存储库是 react-native优化的预定义规则集，使您可以轻松地react-native组件创建每个项目的UI文档。 相同CheckBox组件故事的示例react-native-elements网络和本机渲染。 哲学 一组用于创建基于项目的组件库的...
React Native 自定义下拉刷新上拉加载的列表的示例
11-30
在移动端开发中列表页是非常常见的页面，在React Native中我们一般使用FlatList或SectionList组件实现这些列表视图。通常列表页都会有大量的数据需要加载显示，这时候就用到了分页加载，因此对于列表组件来说，实现...
【React入门实践】结合Ant-Design从0带你手把手开发【个人中心-信息修改】页面
Sabrina_cc的博客
09-01 1240
如果一块表走的不准，那它每一秒都是错的。 写在前面的话：博主之前一直使用的vue框架，最近入手公司项目，开始一点点接触React，我觉得学习任何东西的最好方法就是使用它、体验他。其实完成页面前我根本没有读过react的官方文档（是有些许枯燥）但我会仿照别人的代码一点点尝试，用过之后再去看官方使用文档会豁然开朗。这个方法值得推荐。因此，咱们今天来初试React开发，实现简单的个人中心-信息修改页面 1. 看页面需求 首先看一下页面需求。分析：进入页面调用接口初始化个人信息，修改后点击“保存”按钮，..
从0起步使用React搭建个人主页-01-环境准备
weixin_44286800的博客
11-11 3449
用到的技术栈： 前端：React+create-react-app+redux+react-router+Antd 后台：Koajs+Mysql8.0+sequalize（ORM模型）+redis（数据缓存） 项目放于我的gitee，随缘更新，前端传送门：Excharhttps://gitee.com/exchar/homepage.git 后端传送门： Excharhttps://gitee.com/exchar/personal-home-page---koa.git 第一人称写代码？ ..
React绘制用户界面（UI）篇
m0_61388464的博客
01-16 2145
本文章基于React新文档Beta版，用于重新学习复习React知识，重新学习了解React的新特性。 什么是组件 组件（Components）是 React 的核心概念之一。它是构建用户界面（UI）的基石。React中一切皆为组件。 在HTML当中，由许多的标签组成一个网页，例如 <article> <h1>My First Component</h1> <ol> <li>Components: UI Building
React Native 学习(三)---个人中心
WiFi_Uncle的专栏
12-06 680
图标地址: 链接：https://pan.baidu.com/s/1jI1mHk6 密码：je3j//偷个懒，图标都是阿里素材直接下的，懒得改(当然，自己写着demo，简单易懂就好，工程上还是得好好命名) /** * Created By WiFi ON 2017/12/5 16:46 */ import React, { Component } from 'react'; import {
React Native商城项目实战11 - 个人中心头部内容
08-24 2995
1.创建MineHeaderView.js/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text,
React hooks - useState
最新发布
是草莓味的啊
05-23 189
在hooks出现之前，react的函数式组件也叫做无状态组件（函数里面无法创建属于自己的状态，只能使用props接收）一个管理状态的 hooks，能让函数组件拥有自己的状态，实现状态的初始化、读取、更新。
react-native react-navigation
07-27
React Navigation 还支持自定义导航组件和动画，以及钩子函数和生命周期方法来处理导航事件和状态。它是社区中广泛使用的导航解决方案之一，并且有大量的文档和资源可供学习和参考。 如果你对 React Native 和 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宇智波盆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值