ReactNative小项目——（一）

学习一个新语言还是得实践下。从今天开始做个小项目。

做项目之前当然得先看看别人家的项目怎么写的呀。github上找，一个评价不错的项目react-native-gank

通过看他们的项目结构，我们熟悉的index.android.js 一般只是做一个跳转的作用。然后就是有一个imgs文件夹专门放图片。有个jscode文件夹专门放我们的js代码。结构还是很清晰的 名字我们都可以根据自己的爱好来命名。

说干就干。我们先从index.android.js跳转到一个登陆界面吧。一般的项目都会有个登陆界面。
界面跳转用到了Navigator 。前面的文章ReactNative官网例子练习（四）——页面跳转已经练习过。

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
BackAndroid,
ToastAndroid,
} from 'react-native';
import LoginPage from './appcode/LoginPage'
export default class Leisure extends Component {
constructor (props) {
super(props)
this.handleBack = this._handleBack.bind(this)
}
componentDidMount () {
BackAndroid.addEventListener('hardwareBackPress', this.handleBack)
}
componentWillUnmount () {
BackAndroid.removeEventListener('hardwareBackPress', this.handleBack)
}
_handleBack () {
var navigator = this.navigator
if (navigator && navigator.getCurrentRoutes().length > 1) {
navigator.pop()
return true
}
return false
}
render() {
let defaultName = 'loginPage';
let defaultComponent = LoginPage;
return (
<Navigator
ref={component => this.navigator = component}
styles = {styles.container}
initialRoute = {{name: defaultName,component : defaultComponent}}
configureScene = {
(route)=>{
return Navigator.SceneConfigs.FloatFromRight
}
}
renderScene = {(route,navigator)=>{
let Component = route.component;
return <Component{...route.params} navigator={navigator}/>
}}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
// justifyContent: 'center',
// alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
AppRegistry.registerComponent('Leisure', () => Leisure);

以前的例子中跳转的页面都是写在同一个类中，现在写在了单独的文件夹中。所以得引入一下了

import LoginPage from './appcode/LoginPage'

然后就是我们得监听一下安卓手机的返回键。不然的话，当我们跳转到一个界面，点击返回就回到桌面了。我们得在返回键中将当前页面弹出栈外，漏出下面的界面。通过BackAndroid组件很容易就实现了。

然后就是登陆界面了，一个图片，两个输入框 一个按钮。

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Image,
TouchableHighlight,
} from 'react-native';
import MainPage from './MainPage'
export default class LoginPage extends Component {
clickJump() {
//因为Navigator <Component {...route.params} navigator={navigator} />传入了navigator 所以这里能取到navigator
const {navigator} = this.props;
if (navigator) {
navigator.push({
name: "MainPage",
component: MainPage
})
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>欢迎欢迎!</Text>
<Image source={require('../imgs/launcher.png')} style={styles.header}/>
<TextInput
style={styles.style_user_input}
placeholder='请输入账号'
numberOfLines={1}
// autoFocus={true}
underlineColorAndroid={'transparent'}
textAlign='center'
/>
<View
style={{ height: 1, backgroundColor: '#f4f4f4' }}
/>
<TextInput
style={styles.style_pwd_input}
placeholder='请输入密码'
numberOfLines={1}
underlineColorAndroid={'transparent'}
secureTextEntry={true}
textAlign='center'
/>
<TouchableHighlight
underlayColor="#0588fe"
activeOpacity={0.5}
style={styles.style_view_commit}
onPress={this.clickJump.bind(this)}
>
<Text style={{ color: '#fff' }}>登录</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
// justifyContent: 'center',
// alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
marginTop: 100,
},
style_user_input: {
backgroundColor: '#fff',
marginTop: 10,
height: 35,
},
style_pwd_input: {
backgroundColor: '#fff',
height: 35,
},
style_view_commit: {
marginTop: 15,
marginLeft: 10,
marginRight: 10,
backgroundColor: '#63B8FF',
height: 35,
borderRadius: 5,
justifyContent: 'center',
alignItems: 'center',
},
header: {
height: 70,
width: 70,
alignSelf:'center',
}
});
module.exports = LoginPage
// AppRegistry.registerComponent('Leisure', () => Leisure);

界面很简单 通过官方提供的Image，TextInput和TouchableHighlight就可轻松实现。

需要注意的就是，这个Login界面需要在index界面引入，所以这个类的最后就不是注册了 要导出

module.exports = LoginPage

在引入图片的时候碰到一个问题。我新建一个文件夹imgs来放置图片。引入图片的时候就按照官网上面

<Image source={require('./imgs/launcher.png')} style={styles.header}/>

结果总是报错 提示：
Requiring unknown module ‘./imgs/launcher.png’ if you are sure the module is there,try restarting the packager or running “npm install” 。
为什么啊 图片命名在里面啊 为什么找不到，网上查了好久都不管用。

其实这个问题很简单，路径引用不对，这些都是js的基础了~~门外汉不容易啊。

./ 代表当前目录
../ 代表上级目录
/ 代表根目录

然后看了下我的项目目录改成

<Image source={require('../imgs/launcher.png')} style={styles.header}/>

ok了。

效果

项目在github 托管demo功能慢慢增加

最后

以上就是酷炫月光为你收集整理的ReactNative小项目——（一）的全部内容，希望文章能够帮你解决ReactNative小项目——（一）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。