初入React Native，虽然是JS语言但是写法和思想大不相同，本着react.js能写网站,native能写跨平台APP，所以直接学习了react native方便以后的开发，react的思想和最初学的OC很像，把状态与属性给赋值给一个元素，这样非常的..面向对象，不过react写法很不同再加上ES6的新特性，所以记录一下自己的学习过程，方便以后巩固和加深印象。
Windows下环境配置：开发环境地址
遇到的问题：
1.python2：直接装python2.7就好
2.Android Studio2.0或者更高版本，必须装JDK（java Development Kit1.8或者更高版本，然后配置JAVA_HOME路径）文档详细没写
3.node服务器自动启动不了了（肯定是环境路径问题修改出错了）可以通过打开命令行进入软件目录输入react-native start手动开启node服务器
4.安卓模拟器用Genymotion，abd命令行需要进入我的电脑->属性->高级系统设置->系统属性->环境变量->新建Path（如果有Path则用‘；’与之前的Path隔开）->adb.exe路径'SDK\platform-tools'
开始
1.react-navigation，建立导航
页面跳转和搭建TabBar，使用的是React Navigation组件，需要npm install --save react-navigation，页面跳转用
const router = StackNavigator({
导航页: {
screen: tabBar
},
广告页: {
screen: Ad
},
设置页: {
screen: Set
}
});
TabBar用：
const tabBar = TabNavigator({
首页: {
screen: Home,
navigationOptions: {
tabBarLabel: '首页',
tabBarIcon: ({
tintColor,
focused
}) => (
<Ionicons
name={focused ? 'ios-home' : 'ios-home-outline'}
selectedIconName="ios-home"
size={20}
style={{ color: tintColor }}
/>
),
}
},
发现: {
screen: Find,
navigationOptions: {
tabBarLabel: '发现',
tabBarIcon: ({
tintColor,
focused
}) => (
<Ionicons
name={focused ? 'ios-cube' : 'ios-cube-outline'}
size={20}
style={{ color: tintColor }}
/>
),
}
},
我的: {
screen: My,
navigationOptions: {
tabBarLabel: '我的',
tabBarIcon: ({
tintColor,
focused
}) => (
<Ionicons
name={focused ? 'ios-person' : 'ios-person-outline'}
size={20}
style={{ color: tintColor }}
/>
),
}
},
}, {
tabBarPosition: 'bottom',
swipeEnabled: false, // 禁止左右滑动
tabBarOptions: {
activeTintColor: '#666699', // 文字和图片选中颜色
inactiveTintColor: '#CC9999', // 文字和图片默认颜色
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
indicatorStyle: {
height: 0
}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了， 不知道还有没有其它方法隐藏？？？
style: {
backgroundColor: '#FFFF99', // TabBar 背景色
},
labelStyle: {
fontSize: 12, // 文字大小
},
},
});
需要注意的是，需要把TabBar嵌套在StackNavigator里使用，不然进入第二页下面导航栏任然不会消失，这点让我觉得使用非常不爽，因为我理解TabBar逻辑上是最外一层，按钮上每个首页面再通过StackNavigator嵌套跳转页面，然而它是因为堆栈的缘故，如果TabBar放在表层，嵌套页面永远在TabBar下一级，不会盖过TabBar，但是如果把TabBar嵌套在StackNavigator里的话，新打开的一页就会占整屏幕，但是感觉这样写会对整个程序的路线非常模糊。（不过也许router方法会对程序线路管理有帮助？没细看）
2.react-native-vector-icons：图标地址
配置的东西有点多，不过写的很详细，一步步走就好
import Ionicons from 'react-native-vector-icons/Ionicons';
//首页图标配置
首页: {
screen: Home,
navigationOptions: {
tabBarLabel: '首页',
tabBarIcon: ({tintColor,focused}) => (
<Ionicons name={focused ? 'ios-home' : 'ios-home-outline'}
selectedIconName="ios-home"
size={20}
style={{ color: tintColor }}
/>
),
}
},
，
丑陋的首页以及跳转，把最基础的模型搭建好，之后就可以开始尝试各种组件了~
