SnailApp项目---路由框架搭建

SnailApp项目—路由框架搭建

一、创建Login.js文件

路径：/components/scene/user目录下，创建Login.js文件

'use strict'

import React, {Component} from 'react'
import {View, Text, TextInput, TouchableOpacity, Image} from 'react-native'
import { Actions } from 'react-native-router-flux'
import * as SnailAPi from '../../api/SnailApi'
import { register } from '../../dispatcher/DispatcherUtil'

export default class Login extends Component {

    constructor(props) {
        super(props)

        this.state = {
            username: ''
            ,password: ''
        };
    }

    render() {
        return (
            <View>
                <View style={{ height:44, backgroundColor:'#25A2E1', alignItems:'center', justifyContent:'center'}}>

                    <Text style={{ fontSize:18, color:'#FFFFFF'}}>SnailAPP</Text>

                </View>

                <View style={{ flexDirection:'row', alignItems:'center', marginTop:72}}>
                    <Image style={{ width:16, height:16, marginLeft:35 }}
                           source={ require('../../assets/theme/default/image/user/username.png')}/>
                    <Text style={{ marginLeft:8, fontSize:15, color:'#333333'}}>账号</Text>
                    <TextInput underlineColorAndroid='transparent'
                               style={{width:160, marginTop:2 }}
                               placeholderTextColor='#999999'
                               placeholder='请输入你的账号'
                               onChangeText={(username) => this.setState({username})} value={this.state.username}/>
                </View>
                <View style={{ height:1, backgroundColor:'#999999', marginLeft:35, marginRight:35, marginTop:5 }}/>

                <View style={{ flexDirection:'row', alignItems:'center', marginTop:10}}>
                    <Image style={{ width:16, height:16, marginLeft:35 }}
                           source={ require('../../assets/theme/default/image/user/pw.png')}/>
                    <Text style={{ marginLeft:8, fontSize:15, color:'#333333'}}>密码</Text>
                    <TextInput underlineColorAndroid='transparent'
                               style={{width:160, marginTop:2 }}
                               placeholderTextColor='#999999'
                               placeholder='请输入你的密码'
                               onChangeText={(password) => this.setState({password})}
                               value={this.state.password}/>
                </View>
                <View style={{ height:1, backgroundColor:'#999999', marginLeft:35, marginRight:35, marginTop:5 }}/>
                <TouchableOpacity>
                    <View
                        style={{backgroundColor: '#25A2E1', margin: 35, borderRadius: 5, justifyContent: 'center', alignItems: 'center',}}>
                        <Text style={{color:'#FFFFFF', fontSize: 14, textAlign:'right', padding:12}}>登录</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }

}

二、创建Home.js文件

路径：/components/scene目录下，创建Home.js文件

'use strict'

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';

export default class SnailApp extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    Welcome to SnailApp!
                </Text>
                <Text style={styles.instructions}>
                    蜗牛慢慢跑
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

三、创建入口文件

App.js 整个项目的入口文件

搭建简单的路由框架

• 添加场景：引入将要添加的场景对象

import Login from './components/scene/user/Login'
import Home from './components/scene/Home'

• 注册场景

<Scene key="login" component={Login} initial={true} hideNavBar={true} />
<Scene key="home" hideNavBar component={Home} title="首页" />

• 常用属性：
• key: 定义场景key值，用于场景跳转
• component: 引入场景对象
• initial: 定义初始化页面 默认为false
• hideNavBar: 隐藏导航栏 默认为true
• title: 标题栏名称
• 更多内容请跳转：
• http://blog.csdn.net/fsf_snail/article/details/71080808
• http://blog.csdn.net/fsf_snail/article/details/71080827

'use strict'

import React, { Component } from 'react'
import { Platform } from 'react-native'
import { Scene, Router, Modal } from'react-native-router-flux'
import Login from './components/scene/user/Login'
import Home from './components/scene/Home'

// define this based on the styles/dimensions you use
const getSceneStyle = (/* NavigationSceneRendererProps */ props, computedProps) => {
    const style = {
        flex: 1,
        backgroundColor: '#fff',
        shadowColor: null,
        shadowOffset: null,
        shadowOpacity: null,
        shadowRadius: null,
    };
    if (computedProps.isActive) {
        style.marginTop = Platform.OS == 'ios' ? (computedProps.hideNavBar ? 0 : 64) : (computedProps.hideNavBar ? 0 : 54);
        style.marginBottom = computedProps.hideTabBar ? 0 : 50;
    }
    return style;
}

export default class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Router getSceneStyle={getSceneStyle}>
                <Scene key="modal" component={Modal}>
                    <Scene key="root" hideNavBar hideTabBar navigationBarStyle={{ backgroundColor:'#ffffff' }} titleStyle={{color:'#333333'}}>
                        <Scene key="login" component={Login} initial={true} hideNavBar />
                        <Scene key="home" hideNavBar component={Home} title="首页"/>
                    </Scene>
                </Scene>
            </Router>
        );
    }
}