如果感觉我写的不错，关注我，给个star哦！项目地址
如果遇到什么问题可以在评论区回复，或者加QQ群397885169讨论
前言
一直想用RN写一个功能相对全面的代码，经过一周的寻找，最终还是决定写《百思不得姐》，原因很多，我认为最重要的一点就是网上有接口。
我不知道能将这个APP完成多少，但我会尽可能的完善里面的功能。
开始
创建工程：
创建RN项目要执行：react-native init BaiSi BaiSi就是我这个项目的名称。
创建目录：
目录结构.png
-
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的东西。
运行结果.png
总结
今天的内容有点少，因为公司赶双十二啊😂😂😂
等我忙过这段时间，会尽快将这个项目做完滴！
如果在使用中遇到什么问题，欢迎私信和评论哦！
如果喜欢我的文章，关注我，给个star哦！
