[使用反应导航V向标题添加图像以适合。5 +？

Question

我想添加具有背景色的自定义标题，以及需要适合标题的图像。我正在使用React Navigation 5+（@react-navigation/native, @react-navigation/stack），但是图像不适合标题。有没有一种方法可以添加自定义标头（类似于将组件传递给它）？这是我的工作方式（想知道是否有更好的方法）：

import * as React from 'react';
import { View,Image, Text, TouchableWithoutFeedback, Button, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, HeaderTitle } from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/Ionicons';



const Stack = createStackNavigator();

class App extends React.Component {

  constructor(props) {
    super(props);

  }


  render () {
    return (
      <NavigationContainer>
      <Stack.Navigator>

        <Stack.Screen 
        name="Home" 
        component={HomeScreen}
        options={{
          headerBackground: props => <Header  {...this.props}/>,

        }}
        />
         <Stack.Screen 
         name="FeedbackScreen"
         component={FeedbackScreen}

         />
      </Stack.Navigator>
    </NavigationContainer>
    )
  }
}

function HomeScreen({navigation}) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>  
      <Button 
      title="Feedback"
      onPress={()=> navigation.navigate('FeedbackScreen')}/>
    </View>
  );
}

function FeedbackScreen() {
  return (
    <View>

    </View>
  )
}

function Header() {

  return (
    <View style={{backgroundColor: "#4f2170", flex:1, }}>
      <Image style={StyleSheet.absoluteFill} source={require('./Images/Mon_logo.png')} />

    </View>
    );
}




export default App; 

我尝试了其他答案，但无法成功...

Answer 1

尝试这样的事情。

function LogoTitle() {
 return (
<Image
  style={{ width: 50, height: 50 }}
  source={require('@expo/snack-static/react-native-logo.png')}
/>
);
 }

function StackScreen() {
return (
<Stack.Navigator>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{ headerTitle: props => <LogoTitle {...props} /> }}
  />
</Stack.Navigator>
);
}

source

希望它对您有帮助。