ReactNative学习第二天
来源:互联网 发布:fx5u有什么编程软件 编辑:程序博客网 时间:2024/06/06 09:12
第二天了,今天学习下UI里最基础的一个控件:TabBar。这里要用到一个第三方库: react-native-tab-navigator。下面我们来写一个例子
一、环境搭建
这里就不介绍了,ReactNative中文网上有。
二、创建项目
react-native init TabBarProject --version 0.44.3
npm install
react-native run-ios
三、下载 react-native-tab-navigator
cd 到项目跟目录执行 npm install react-native-tab-navigator --save
四、修改 index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Home
</Text>
</View>
)
}
}
class Profile extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Profile
</Text>
</View>
)
}
}
export default class TabBarProject extends Component {
state= {
selectedTab: 'home'
};
render() {
return (
<TabNavigator style={styles.container}>
<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="Home"
selectedTitleStyle={{color: "#3496f0"}}
renderIcon={() => <Image style={styles.icon} source={require("./images/home.png")} />}
renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./images/home.png")} />}
badgeText="1"
onPress={() => this.setState({selectedTab: 'home'})}>
<Home/>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'profile'}
title="Profile"
selectedTitleStyle={{color: "#3496f0"}}
renderIcon={() => <Image style={styles.icon} source={require("./images/profile.png")} />}
renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./images/profile.png")} />}
onPress={() => this.setState({selectedTab: 'profile'})}>
<Profile/>
</TabNavigator.Item>
</TabNavigator>
);
}
}
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,
},
icon: {
width: 20,
height: 20
}
});
AppRegistry.registerComponent('TabBarProject', () => TabBarProject);
五、用Xcode打开iOS工程,运行
- ReactNative学习第二天
- ReactNative 学习第二节 环境搭建
- [ReactNative]ReactNative学习资源整合
- ReactNative学习
- reactNative学习
- reactNative学习
- 学习ReactNative
- ReactNative学习一
- ReactNative学习二
- ReactNative学习三
- ReactNative学习 第一节
- ReactNative学习记录(一)
- ReactNative学习资源整合
- ReactNative学习小结
- ReactNative学习过程
- 【ReactNative】代码学习(一)
- ReactNative学习路线图
- ReactNative学习小结
- js小技巧
- 这段时间一直在看马士兵老师的视频,收藏这篇关于学习java的文章
- PHP中 sprintf()格式化输出详解
- 《Spring设计思想》AOP设计基本原理
- Django 1.11 json接口编写以及测试
- ReactNative学习第二天
- JS中浏览器兼容性问题
- Android拍照适配方案
- SpringBoot 使用Scheduled 定时任务入门
- 计算机网络的物理层
- 集成Fabric的Crashlytics(崩溃统计)
- Struts防止表单重复提交
- Mysql常用30种SQL查询语句优化方法
- Mysql启动失败