我正在使用react native elements Header来显示我的抽屉,我面临两个问题:1)我的抽屉没有覆盖整个顶部(标题区域)。 (从图片中可以看到,蓝色没有覆盖整个标题)2)如何添加图像而不是图标,因为我不想使用react-native-vector-icons以及如何在该图像上添加onPress()方法,基本上我想添加自定义抽屉图像onPress openDrawer。
这是我的代码:
import React, { Component } from 'react';
import { StyleSheet, Text, View,Image,TouchableOpacity, Alert } from 'react-native';
import Timeline from 'react-native-timeline-flatlist';
import {Header} from 'react-native-elements';
export default class HomeTimeTable extends Component {
render() {
//'rgb(45,156,219)'
return (
<View style={styles.container}>
<Header
placement="left"
leftComponent={{ icon: 'menu', color: '#fff' }}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
/>
<Timeline
...
/>
</View>
);
}
}
这是我的样式表:
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: 'white',
},
list: {
flex: 1,
marginTop: 20,
},
drawer:{
width:20,
height:20,
justifyContent:"flex-start",
}
});
下面的代码应该起作用。
import React, { Component } from 'react';
import { StyleSheet, Text, View,Image,TouchableOpacity, Alert, Image } from 'react-native';
import Timeline from 'react-native-timeline-flatlist';
import {Header} from 'react-native-elements';
export default class HomeTimeTable extends Component {
const renderCustomIconA = () => {
return(
<TouchableOpacity onPress={() => {console.log('A Pressed!')}}>
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
/>
</TouchableOpacity>
);
};
const renderCustomIconB = () => {
return(
<TouchableOpacity onPress={() => {console.log('B Pressed!')}}>
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
/>
</TouchableOpacity>
);
};
render() {
//'rgb(45,156,219)'
return (
<>
<Header
placement="left"
leftComponent={() => renderCustomIconA()}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
rightComponent={() => renderCustomIconB()}
/>
<View style={styles.container}>
<Timeline
...
/>
</View>
</>
);
}
}