英文:
I want to add a filter icon on navigation header in react-native but i dont have any idea about it
问题
在导航标题中添加图标时出现错误,错误信息是对象不是一个函数。
<Stack.Screen
name="Address"
component={Address}
options={{ headerLeft: <MaterialCommunityIcons name="heart" /> }}
/>
英文:
here i try to add icon in navigation header but is show error that object is not a function
<Stack.Screen
name="Address"
component={Address}
options={{ headerLeft: <MaterialCommunityIcons name="heart" /> }}
/>
答案1
得分: 1
你尝试过这样吗:
<Stack.Screen
name="Address"
component={Address}
options={{
headerLeft: () => (
<MaterialCommunityIcons name="heart" />),
/>
英文:
Have you tried like this:-
<Stack.Screen
name="Address"
component={Address}
options={{
headerLeft: () => (
<MaterialCommunityIcons name="heart" />),
/>
答案2
得分: 0
以下是您提供的代码的翻译部分:
import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
const Stack = createNativeStackNavigator();
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Search"
onPress={() => navigation.navigate('Search')}
/>
</View>
);
}
function EmptyScreen() {
return <View />;
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Group
screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerRight: () => <MaterialCommunityIcons name="heart" />,
}}
/>
<Stack.Screen name="Profile" component={EmptyScreen} />
</Stack.Group>
</Stack.Navigator>
</NavigationContainer>
);
}
希望对您有所帮助!
英文:
Check below working code:
import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
const Stack = createNativeStackNavigator();
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Search"
onPress={() => navigation.navigate('Search')}
/>
</View>
);
}
function EmptyScreen() {
return <View />;
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Group
screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerRight: () =><MaterialCommunityIcons name="heart" />,
}}
/>
<Stack.Screen name="Profile" component={EmptyScreen} />
</Stack.Group>
</Stack.Navigator>
</NavigationContainer>
);
}
Hope it will help you!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论