/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
'use strict';
import React, {
AppRegistry,
Component,
View,
StyleSheet,
AlertIOS,
Text,
TabBarIOS,
NavigatorIOS,
} from 'react-native';
var Icon = require('react-native-vector-icons/FontAwesome');
import FindComponent from './FindComponent';
import SearchComponent from './SearchComponent';
class Demo extends Component {
state = {
selectedTab: 'find',
};
loginWithFacebook = () => { //点击"Login with Facebook"按钮后触发的方法
AlertIOS.alert("facebook");
}
render() {
return (
<View style={styles.container}>
<Icon
name="rocket" //图片名连接,可以到这个网址搜索:http://ionicons.com/, 使用时:去掉前面的 "icon-" !!!!
size={30} //图片大小
color="red" //图片颜色
/>
<Icon.Button //在图片后加文字
name="facebook"
backgroundColor="#3b5998"
onPress={this.loginWithFacebook} //点击该按钮后触发的方法
>
Login with Facebook
</Icon.Button>
<Icon.Button //在图片后加, 自定义样式的文字
name="facebook"
backgroundColor="#3b5998">
<Text style={{fontFamily: 'Arial', fontSize: 15}}>Login with Facebook</Text>
</Icon.Button>
<TabBarIOS //和标签视图一起使用
tintColor="#4977f0"
barTintColor="#E6E6E6">
<Icon.TabBarItem //用 Icon.TabBarItem 代替 TabBarIOS.Item
title="发现"
iconName="home"
selectedIconName="home"
selected = {this.state.selectedTab === 'find'}
onPress={() => {
this.setState({
selectedTab: 'find',
});
}}>
<NavigatorIOS //导航栏
style={styles.container}
tintColor='#FFFFFF'
barTintColor='#4977f0'
initialRoute={{
title: "发现",
titleTextColor: 'white',
component: FindComponent
}}/>
</Icon.TabBarItem>
<Icon.TabBarItem //用 Icon.TabBarItem 代替 TabBarIOS.Item
title="搜索"
iconName="search"
selectedIconName="search"
selected = {this.state.selectedTab === 'search'}
onPress={() => {
this.setState({
selectedTab: 'search',
});
}}>
<NavigatorIOS
style={styles.container}
tintColor='#FFFFFF'
barTintColor='#4977f0'
initialRoute={{
title: "搜索",
titleTextColor: 'white',
component: SearchComponent
}}/>
</Icon.TabBarItem>
</TabBarIOS>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
});
AppRegistry.registerComponent('Demo', () => Demo);
