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功能慢慢增加