如果感觉我写的不错,关注我,给个star哦!项目地址
如果遇到什么问题可以在评论区回复,或者加QQ群397885169讨论
前言
一直想用RN写一个功能相对全面的代码,经过一周的寻找,最终还是决定写《百思不得姐》,原因很多,我认为最重要的一点就是网上有接口。
我不知道能将这个APP完成多少,但我会尽可能的完善里面的功能。
开始
创建工程:
创建RN项目要执行:react-native init BaiSi
BaiSi就是我这个项目的名称。
创建目录:
-
index.ios.js
和index.android.js
这两个本来应该是程序入口,但为了让代码跨平台,所以我们在app目录下创建了app.js
,用它来表示项目的跟入口,为了以后使用Redux做准备。 -
base
文件夹里面放的是程序中只创建使用一次的东西,比如说底部的TabBar和Navigator。 -
common
文件夹里面放着公共的方法,比如说网络请求,json数据。 -
component
文件夹里面放着项目中要经常用到的组件,比如收返回按钮。 -
pages
文件夹里面放着项目中的页面和页面中要用到的组件。
暂时我只想到这么多文件,以后可能会添加Redux目录结构需要的文件夹。
导入组件
俗话说:前人种树后人乘凉。在github上有很多大神开源了很多可以快速搭建项目的组件,在这个项目中推荐几个。当然,开始创建项目的时候,很多开源组件是用不到的,用到的时候会在之后文章中说明。
react-native-tab-navigator
创建类似iOS底部TabBarController的组件,简单,粗暴。
react-native-vector-icons
图标组件,在RN开发中会发现,如果调用项目中的图标会有一个延迟,这个是RN异步加载的问题。所以,就到了这个库大显神威的时候啦。
react-native-navbar
导航条组件,这个库封装了类似iOS顶部导航条的UI,API简单,页面也和原生很像。
搭建页面结构
基本每个APP都需要一个页面结构,比如说只有导航,没有TabBar,只有TabBar,没有导航,当然我们是一个完整的项目,这两者都要有,您说是吧。
index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import App from './app/app';
export default class BaiSi extends Component {
render() {
return (
<App />
);
}
}
AppRegistry.registerComponent('BaiSi', () => BaiSi);
上面也说了,虽然这个是之前的入口,但为了跨平台,只能忍痛割爱啦!
app.js
import React, { Component } from 'react';
import {
Navigator,
} from 'react-native';
import Root from '../app/base/root';
export default class app extends Component {
render() {
return (
<Root />
);
}
};
这个才是我们真正的入口!以后可能要使用Redux,所以这个页面也是很空旷滴!
root.js
import React, { Component } from 'react';
import {
Navigator,
View
} from 'react-native';
import TabBar from './tabBar';
export default class root extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<Navigator
initialRoute={{ name: 'TabBar', component: TabBar }}
style={{height:64}}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.PushFromRight;
} }
renderScene={(route, navigator) => {
let Component = route.component;
return (
<Component navigator = {navigator} route = {route} {...route.passProps} />
)
} }
/>
</View>
);
}
};
这个里面放着项目中最重要的东西,页面之后的跳转和传值全靠它了。
tabBar.js
import React, { Component } from 'react';
import {
View,
Text,
Image,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Icon from 'react-native-vector-icons/Ionicons';
import Home from '../pages/home/homeContainer';
import Main from '../pages/main/mainContainer';
import Middle from '../pages/middle/middleContainer';
const tabBarItems = [
{ title: '精华', icon: () => <Icon name="ios-home" size={30} color='#333' style={{marginTop:20}}/>,
selectedIcon: () => <Icon name="ios-home" size={30} color='#d81e06' style={{marginTop:20}}/>
,component: Home },
{ title: null, icon: () => <Icon name="md-add-circle" size={48} color='#d81e06' />,
selectedIcon: () => <Icon name="md-add-circle" size={48} color='#d81e06' />,
component: Middle },
{ title: '我的', icon: () => <Icon name="md-contact" size={30} color='#333' style={{marginTop:20}}/>,
selectedIcon: () => <Icon name="md-contact" size={30} color='#d81e06' style={{marginTop:20}}/>,
component: Main },
];
export default class tabBar extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: tabBarItems[0].title,
};
}
render(){
return(
<TabNavigator tabBarStyle={{height:49}}>
{
tabBarItems.map((controller,i) => {
let Component = controller.component;
return(
<TabNavigator.Item
key={i}
selected = {this.state.selectedTab === controller.title}
title = {controller.title}
renderIcon = {controller.icon}
renderSelectedIcon = {controller.selectedIcon}
onPress={() => this.setState({selectedTab:controller.title})}
titleStyle={{color:'#333',fontSize:12}}
selectedTitleStyle={{color:'rgb(251,33,33)'}}
allowFontScaling={true}
>
<Component navigator = {this.props.navigator} {...this.props} />
</TabNavigator.Item>
)
})
}
</TabNavigator>
)
}
}
这里面放着底部TabBar的东西。
总结
今天的内容有点少,因为公司赶双十二啊😂😂😂
等我忙过这段时间,会尽快将这个项目做完滴!
如果在使用中遇到什么问题,欢迎私信和评论哦!
如果喜欢我的文章,关注我,给个star哦!