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>
);
}
}