使用方法:
给组件传入三个对应方法,方法返回react元素
leftItem:PropTypes.func,
middleItem:PropTypes.func,
rightItem:PropTypes.func
import React,{Component} from 'react'
import PropTypes from 'prop-types'
import {
View,
Text,
StyleSheet,
Dimensions,
Platform
} from 'react-native'
class TopBar extends Component{
static propTypes={
leftItem:PropTypes.func,
middleItem:PropTypes.func,
rightItem:PropTypes.func
}
renderLeft()
{
if(this.props.leftItem)
{
return this.props.leftItem();
}else{
return ;
}
}
renderMiddle()
{
if(this.props.middleItem)
{
return this.props.middleItem();
}else{
return ;
}
}
renderRight()
{
if(this.props.rightItem)
{
return this.props.rightItem();
}else{
return ;
}
}
render()
{
return(
<View style={styles.container}>
<View>
{this.renderLeft()}
</View>
<View>
{this.renderMiddle()}
</View>
<View>
{this.renderRight()}
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
width:Dimensions.get('window').width,
height:Platform.OS==='ios'?66:44,
backgroundColor:'white',
flexDirection:'row',
justifyContent:'space-between',
alignItems:'center',
borderBottomWidth:1,
borderBottomColor:'#ccc'
}
})
export default TopBar
效果图: