RN(react native)入坑指南-02,一个登录示例
来源:互联网 发布:c语言pthread 编辑:程序博客网 时间:2024/06/04 23:34
Github上发现一只登录示例,拿来尝鲜,这里需要注意的坑有如下两点
1.关于注释,恩…
// 单行 /*多行 */
这个自然不用说,需要说的是,你得在外面加一层{}给包起来
2.win下引用静态资源图片会出现引用到显示不出来的Bug(此bug0.13版本后已经修复),关于这个问题参考链接1,2里给出了不同的解决方案,我这里采用的是Stackoverflow的解决方式。
官方的说法是
There are several ways to use local images in a react-native app: Using xcassets folder`- source={require('image!bg')}`. The images must be in the xcassetsfolder and according to the docs you should have the image in all the 3 sizes. Relative path` - source={require('./bg.png')}`Note that you have to add the file sufix.The way it actually works` - source={{ uri: "google", isStatic: true }}` instead ofrequire('image!google')`. This way you can use both images that are in your xcassets folder and those that are not without killing yourself while trying to find the right relative path.
大体意思就是说,如果你想引用本地资源辣么有两种方式
1.使用xcassets folder
2.使用相对路径,这里的坑点在于,当你
require('image!google')
这么写的时候,很可能红屏或者引用到了不显示,所以建议采用
source={{ uri: "google", isStatic: true }}
这种方式去引用,如果你是安德猴的话,把你的图片放到drawable下面就好了。:)
废话不多说 直接撸代码,为什么没有button呢 因为Touchablexxx的就是button啊
'use strict';var React = require('react-native');//组件注册var { AppRegistry, StyleSheet, Image, TextInput, Text, ScrollView, TouchableOpacity, RCTImage, View} = Reactvar react = React.createClass({ //渲染界面 render: function() { return ( <ScrollView contentContainerStyle={{flex:1}} keyboardDismissMode='on-drag' keyboardShouldPersistTaps={false} > <View style={styles.container}> {/*LOGO*/} <Image source={{ uri: "logo", isStatic: true }} style={styles.logo}/> {/*用户名*/} <TextInput ref={(username) => this.username = username} onFocus={() => this.username.focus()} style={styles.input} placeholder='请输入用户名'/> {/*密码*/} <TextInput ref={(password) => this.password = password} onFocus={() => this.password.focus()} style={styles.input} placeholder='请输入密码' password={true}/> <TouchableOpacity style={styles.btn} onPress={() => console.log('press me')}> {/*登录*/} <Text style={styles.text}>登录</Text> </TouchableOpacity> </View> </ScrollView> ); }});var styles = StyleSheet.create({ container: { flex: 1, paddingLeft: 10, paddingRight: 10, alignItems: 'center', backgroundColor: '#F5FCFF' }, logo: { width: 160, height: 160, marginTop: 100 }, input: { marginTop: 10, height: 40, borderRadius: 5, borderWidth: 1, borderColor: 'lightblue' }, text: { fontWeight: 'bold', fontSize: 14, color: '#FFF' }, btn: { alignSelf: 'stretch', alignItems: 'center', justifyContent: 'center', backgroundColor: '#3333FF', height: 40, borderRadius: 5, marginTop: 10 }});AppRegistry.registerComponent('react', () => react);
参考指南:
React Native登录示例
Win下RN的图片坑
Win下RN的图片坑之改源码解决方案
0 0
- RN(react native)入坑指南-02,一个登录示例
- RN(react native)入坑指南-01,Hello RN
- RN(react native)入坑指南-03,运行官方示例UIExplorer
- RN(react native)入坑指南-04,布局容器
- RN(react native)入坑指南-附录A,常用命令
- RN(react native)入坑指南-01,Hello RN,Windows下的环境搭建
- RN(react native)入坑指南-05,使用图标字体Fontawesome
- RN(react native)入坑指南-06,项目开发结构(代码分层组织)
- RN(react native)入坑指南-07,使用navigator实现页面跳转
- RN(react native)入坑指南-08,如何加载远程数据
- RN(react native)入坑指南-09,单元学习小结
- RN(react native)入坑指南-12,打正式签名包和发布
- RN(react native)入坑指南-10,组件的生命周期
- React Native 入坑记录
- React Native 入坑实践
- React-Native入坑积累
- React Native-----RN----React Native介绍
- <React Native> 学习日记(1) 成功运行、编译RN-android的爬坑记录
- android 打 release包解决字节对其问题
- 转载:css隐藏元素的几种方案
- 又遇No result defined for action org.action.AddAction and result success
- 二分匹配题集
- JAVA round 和 floor的区别
- RN(react native)入坑指南-02,一个登录示例
- CodeVS1990 中国余数定理2
- LeetCode *** 172. Factorial Trailing Zeroes
- JZOJ.3383 太鼓达人
- Web开发_问题解决(3)之linux服务器上获取路径问题||jsp页面报错问题
- Android-ndk-64位so文件问题(RSA加密采用cpp代码实现)
- poj_1028
- Android 第十一天重置版_新特性
- 002-栈