RN（react native）入坑指南_02,一个登录示例
Github上发现一只登录示例，拿来尝鲜,这里需要注意的坑有如下两点
1.关于注释，恩…
// 单行
/*多行 */
这个自然不用说，需要说的是，你得在外面加一层{}给包起来
2.win下引用静态资源图片会出现引用到显示不出来的Bug，关于这个问题参考链接1,2里给出了不同的解决方案，我这里采用的是Stackoverflow的解决方式。
如果你想引用本地资源辣么有两种方式
1.使用xcassets folder
2.使用相对路径，这里的坑点在于，当你
这么写的时候，很可能红屏或者引用到了不显示，所以建议采用
1
| source={{ uri: "google", isStatic: true }}
|
这种方式去引用，如果你是安德猴的话，把你的图片放到drawable下面就好了。：）
废话不多说 直接撸代码,为什么没有button呢 因为Touchablexxx的就是button啊
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
| 'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Image,
TextInput,
Text,
ScrollView,
TouchableOpacity,
RCTImage,
View
} = React
var 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的图片坑之改源码解决方案
