通过官网的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的基本组件的认识的更多相关文章

  1. React-Native之截图组件view-shot的介绍与使用

    React-Native之截图组件view-shot的介绍与使用 一,需求分析 1,需要将分享页生成图片,并分享到微信好友与朋友圈. 二,react-native-view-shot介绍 1,可以截取 ...

  2. react-native 封装 VedioPlayer 组件

    1.封装组件 src/components/VideoPlayer/index.js /** * 视频播放器 组件(VideoPlayer) */ import React, {Component} ...

  3. ReactNative: 使用View组件创建九宫格

    一.简言 初学RN,一切皆新.View组件跟我们iOS中UIView类似,作为一个容器视图使用,它主要负责承载其他的子组件.View组件采用的是FlexBox伸缩盒子布局,通过对它的布局可以影响子组件 ...

  4. [技术博客]React-Native中的组件加载、卸载与setState问题

    React-Native中的组件加载.卸载与setState问题. Warning: Can only update a mounted or mounting component. This usu ...

  5. React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现

    React-Native在0.43推出了两款新的列表组件:FlatList(高性能的简单列表组件)和SectionList(高性能的分组列表组件). 从官方上它们都支持常用的以下功能: 完全跨平台. ...

  6. React-Native 之 常用组件Image使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  7. react-native自定义原生组件

    此文已由作者王翔授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 使用react-native的时候能够看到不少函数调用式的组件,像LinkIOS用来呼起url请求  Link ...

  8. ReactNative: 使用对话框组件AlertIOS组件

    一.简介 在使用一款App的时候,经常会用到对话框进行信息的友好提示,一般简单要求性不高的时候我们可以使用web提供的alert实现即可.但是,对于需要交互性和美观性的对话框,alert就明显无法满足 ...

  9. ReactNative: 使用网页组件WebView组件

    一.简介 在移动端开发中,很多时候需要嵌入一个网页来帮助实现某一个活动,这方式大大提高了活动快速迭代的灵活性,在RN中,同样也这么处理这种情况的.其实,这种混合式开发称为Hybird APP,它们就是 ...

随机推荐

  1. C#实现二分法查找算法

    /// <summary> /// 二分法查找 /// </summary> /// <param name="arr"></param& ...

  2. 影响JavaScript应用可扩展性因素

    引言:JavaScript 应用变得越来越庞大.这是因为使用JavaScript能做的事情远比我们大多数人所需求的要多得多.我们不能仅因为技术上可行,就去考虑软件系统的扩展问题.为一个不需要扩展的系统 ...

  3. GitHub上最火的Android开源项目整理

    这篇文章介绍GitHub上另外34个非常受欢迎的Android开源项目,在这些项目中,你又在用或用过哪些呢? 41. android-swipelistview SwipeListView是一个And ...

  4. EFI、UEFI、MBR、GPT的区别

    UEFI.GPT.MBR是什么?这些专业术语不难理解,UEFI属于主板类名词,其作用类似于BIOS.GPT.MBR则属于硬盘类名词,它们的作用类似一艘航母的骨架,有了这个骨架,我们才可以进行细致到诸如 ...

  5. Flex中的FusionCharts 2D折线图

    Flex中的FusionCharts 2D折线图 1.设计源码 LineChart.mxml: <?xml version="1.0" encoding="utf- ...

  6. 用OpenStack界面轻松创建虚拟机的你,看得懂虚拟机启动的这24个参数么?

    看这篇文章之前,保证看过以下文章: 我是虚拟机内核我困惑?! Qemu,KVM,Virsh傻傻的分不清 裸用KVM创建虚拟机,体验virtualbox为你做的10件事情 大家从OpenStack页面上 ...

  7. ASP.NET Core轻松入门之Configure中IHostingEnvironment和IApplicationLifetime的使用

    在StratUp.cs的Configure方法中,除了 常用的参数除了IApplicationBuilder和在我上一篇文章中提到的Iconfiguration点击打开链接 外  还有 IHostin ...

  8. WPF基础篇之连接数据库

    WPF连接DB2数据库 public void ConnectionBD2Func() { //连接数据库字符串,DB2 9.5以下版本使用Data Source=Test,否则查询找不到数据库.DB ...

  9. CentOS7使用dnf安装mysql

    1.安装mysql的yum仓库 执行以下命令: yum localinstall https://dev.mysql.com/get/mysql57-community-release-el7-11. ...

  10. 让安卓app支持swf的一个播放器,和自己编写的音乐管理程序

    jcenter方式导入 在需要用到这个库的module中的build.gradle中的dependencies中加入 dependencies { compile 'com.yhd.hdswfplay ...