ReactNative的基本组件的认识
通过官网的react-native init myProject,并打开Android Studio的手机模拟器进行调试
下面的代码使用了 Text 、Image、View、TextInput和的react-native-modal-dropdown(下拉框)的组件,初步开发了一个登陆界面
1、Image的 source静态资源需要 require的引入,服务器资源的引入uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
2、一行显示设置flexDirection: 'row'
3、android的输入框TextInput的
<TextInput
style={{height: 40,width:200,padding: 0}}
underlineColorAndroid="transparent" 去掉下边框
keyboardType ='numeric' 调起的是数字键盘
placeholder="请输入手机号"
onChangeText={(text) => this.setState({text})}
secureTextEntry={true} 像password的输入
/>
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/ import React, {
Component
} from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
TextInput
} from 'react-native'; import ModalDropdown from 'react-native-modal-dropdown'; const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
}); type Props = {};
export default class App extends Component < Props > {
constructor(props) {
super(props);
this.state = {
text: '',
value:'',
c:'86'
}
}
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
let phone=[86,100,200,300]
return(
<View style={styles.container}>
<Image source={require('./img/img.jpg')} style={{width: 193, height: 110}} />
<Text style={styles.title}>
代理后台
</Text> <View style={{flexDirection: 'row',borderBottomColor:'#dbdbdb',borderBottomWidth:1}}>
<Text style={{marginRight:10}}>
国家/地区
</Text>
<ModalDropdown
options={['中国大陆', '香港','台湾','美国']}
dropdownStyle={{height: 300,width:200}}
textStyle={{height: 30,width:200,padding:0}}
defaultValue='中国大陆'
onSelect={(index,value)=>{
this.setState({
c:phone[index]
})
}}
/>
</View>
<View style={{flexDirection: 'row',borderBottomColor:'#dbdbdb',borderBottomWidth:1}}>
<Text style={{height: 40,marginRight:40,lineHeight:40}}>
+ {this.state.c}
</Text>
<TextInput
style={{height: 40,width:200,padding: 0}}
underlineColorAndroid="transparent"
keyboardType ='numeric'
placeholder="请输入手机号"
onChangeText={(text) => this.setState({text})}
secureTextEntry={true}
/>
</View>
<View style={{
borderBottomColor:'#dbdbdb',
borderBottomWidth:1
}}>
<TextInput
style={{height: 40,width:200,padding:0}}
keyboardType ='numeric'
underlineColorAndroid="transparent"
placeholder="请输入验证码"
onChangeText={(text) => this.setState({text})}
/>
</View>
<Text style={styles.instructions}>
{this.state.text}
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
paddingTop: 10,
alignItems: 'center',
backgroundColor: '#fff',
},
title: {
fontSize: 20,
textAlign: 'center',
color: '#000',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
ReactNative的基本组件的认识的更多相关文章
- React-Native之截图组件view-shot的介绍与使用
React-Native之截图组件view-shot的介绍与使用 一,需求分析 1,需要将分享页生成图片,并分享到微信好友与朋友圈. 二,react-native-view-shot介绍 1,可以截取 ...
- react-native 封装 VedioPlayer 组件
1.封装组件 src/components/VideoPlayer/index.js /** * 视频播放器 组件(VideoPlayer) */ import React, {Component} ...
- ReactNative: 使用View组件创建九宫格
一.简言 初学RN,一切皆新.View组件跟我们iOS中UIView类似,作为一个容器视图使用,它主要负责承载其他的子组件.View组件采用的是FlexBox伸缩盒子布局,通过对它的布局可以影响子组件 ...
- [技术博客]React-Native中的组件加载、卸载与setState问题
React-Native中的组件加载.卸载与setState问题. Warning: Can only update a mounted or mounting component. This usu ...
- React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现
React-Native在0.43推出了两款新的列表组件:FlatList(高性能的简单列表组件)和SectionList(高性能的分组列表组件). 从官方上它们都支持常用的以下功能: 完全跨平台. ...
- React-Native 之 常用组件Image使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- react-native自定义原生组件
此文已由作者王翔授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 使用react-native的时候能够看到不少函数调用式的组件,像LinkIOS用来呼起url请求 Link ...
- ReactNative: 使用对话框组件AlertIOS组件
一.简介 在使用一款App的时候,经常会用到对话框进行信息的友好提示,一般简单要求性不高的时候我们可以使用web提供的alert实现即可.但是,对于需要交互性和美观性的对话框,alert就明显无法满足 ...
- ReactNative: 使用网页组件WebView组件
一.简介 在移动端开发中,很多时候需要嵌入一个网页来帮助实现某一个活动,这方式大大提高了活动快速迭代的灵活性,在RN中,同样也这么处理这种情况的.其实,这种混合式开发称为Hybird APP,它们就是 ...
随机推荐
- C#实现二分法查找算法
/// <summary> /// 二分法查找 /// </summary> /// <param name="arr"></param& ...
- 影响JavaScript应用可扩展性因素
引言:JavaScript 应用变得越来越庞大.这是因为使用JavaScript能做的事情远比我们大多数人所需求的要多得多.我们不能仅因为技术上可行,就去考虑软件系统的扩展问题.为一个不需要扩展的系统 ...
- GitHub上最火的Android开源项目整理
这篇文章介绍GitHub上另外34个非常受欢迎的Android开源项目,在这些项目中,你又在用或用过哪些呢? 41. android-swipelistview SwipeListView是一个And ...
- EFI、UEFI、MBR、GPT的区别
UEFI.GPT.MBR是什么?这些专业术语不难理解,UEFI属于主板类名词,其作用类似于BIOS.GPT.MBR则属于硬盘类名词,它们的作用类似一艘航母的骨架,有了这个骨架,我们才可以进行细致到诸如 ...
- Flex中的FusionCharts 2D折线图
Flex中的FusionCharts 2D折线图 1.设计源码 LineChart.mxml: <?xml version="1.0" encoding="utf- ...
- 用OpenStack界面轻松创建虚拟机的你,看得懂虚拟机启动的这24个参数么?
看这篇文章之前,保证看过以下文章: 我是虚拟机内核我困惑?! Qemu,KVM,Virsh傻傻的分不清 裸用KVM创建虚拟机,体验virtualbox为你做的10件事情 大家从OpenStack页面上 ...
- ASP.NET Core轻松入门之Configure中IHostingEnvironment和IApplicationLifetime的使用
在StratUp.cs的Configure方法中,除了 常用的参数除了IApplicationBuilder和在我上一篇文章中提到的Iconfiguration点击打开链接 外 还有 IHostin ...
- WPF基础篇之连接数据库
WPF连接DB2数据库 public void ConnectionBD2Func() { //连接数据库字符串,DB2 9.5以下版本使用Data Source=Test,否则查询找不到数据库.DB ...
- CentOS7使用dnf安装mysql
1.安装mysql的yum仓库 执行以下命令: yum localinstall https://dev.mysql.com/get/mysql57-community-release-el7-11. ...
- 让安卓app支持swf的一个播放器,和自己编写的音乐管理程序
jcenter方式导入 在需要用到这个库的module中的build.gradle中的dependencies中加入 dependencies { compile 'com.yhd.hdswfplay ...