/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
TouchableHighlight,
TouchableOpacity,
Image,
TabBarIOS,
} from 'react-native';
var imgs=[
'http://img3.imgtn.bdimg.com/it/u=3095238459,1538292730&fm=21&gp=0.jpg','http://img.mypsd.com.cn/e/d/%e7%9f%a2%e9%87%8f%e5%9b%be%e5%ba%93/%e7%9f%a2%e9%87%8f%e4%ba%ba%e7%89%a9/%e5%85%b6%e4%bb%96/d/jpg/d90-wjdjawjkdjkwajdk%20%28262%29.jpg','http://pic.58pic.com/58pic/14/10/61/46J58PICa3v_1024.jpg',
];
class MyImage extends Component{
constructor(props){
super(props);
var imgs=this.props.imgs;
this.state={
imgs:imgs,
count:0
}
}
render(){
return(
<View style={styles.container}>
<View style={styles.image}>
<Image style={styles.img} resizeMode="contain" />
</View>
<View style={styles.btns}>
<TouchableOpacity onpress={()=>this.goPreview}>
<View style={styles.btn}>
<Text>上一张</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onpress={()=>this.goNext}>
<View style={styles.btn}>
<Text>下一张</Text>
</View>
</TouchableOpacity>
</View>
</View>
)
}
}
class tabBar extends Component{
constructor(props) {
super(props);
this.state = {
selectedTab: 'greenTab',
notifCount: 0,
presses: 0,
};
}
render(){
return(
<TabBarIOS style={styles.container} barTintColor="#000" tintColor="red" unselectedTintColor="blue">
<TabBarIOS.Item title="news" systemIcon="bookmarks" onPress={()=>{this.setState({
selectedTab: 'blueTab',
});}} selected={this.state.selectedTab === 'blueTab'}>
<View><Text>1</Text></View>
</TabBarIOS.Item>
<TabBarIOS.Item title="tele" systemIcon="more" onPress={()=>{this.setState({
selectedTab: 'redTab',
});}} selected={this.state.selectedTab === 'redTab'}>
<View><Text>2</Text></View>
</TabBarIOS.Item>
<TabBarIOS.Item title="动态" systemIcon="search" onPress={()=>{this.setState({
selectedTab: 'greenTab',
});}} selected={this.state.selectedTab === 'greenTab'}>
<View><Text>3</Text></View>
</TabBarIOS.Item>
</TabBarIOS>
)
}
}
class demo extends Component {
render() {
return (
<View style={styles.container}>
<MyImage></MyImage>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
image:{
borderWidth:1,
width:300,
height:200,
borderRadius:5,
borderColor:"#ccc",
justifyContent:"center",
alignItems:"center",
marginTop:40,
},
img:{
height:150,
width:200,
},
btns:{
flexDirection:"row",
justifyContent:"center",
marginTop:20,
},
btn:{
width:60,
height:30,
justifyContent:"center",
alignItems:"center",
marginRight:20,
borderColor:"grey",
borderWidth:1,
},
});
AppRegistry.registerComponent('demo', () => tabBar);
网友评论