0

有没有办法在自定义标题中显示本机后退图标（对于 android nad iOS 不同）？我已经创建了自定义标题，但不知道如何显示它们。

我正在使用反应导航版本 6

我的堆栈：

 <Stack.Navigator screenOptions={
    stackOptions({
       header: (props: any) => <Header {...props}/>,
       headerRight: () => HeaderActionIcon({
          icon: <SvgSettings/>,
         action: () => navigation.navigate('Settings')
       })
  })}>

我的标题组件：

const Header = ({ ...props }: any) => {

const { options, navigation } = props

return (
    <View style={styles.container}>
        <Image
            resizeMode='repeat'
            source={require('../../assets/img/pattern.png')}
            style={styles.image}
        />
        <View style={styles.wrapper}>
            {/* Back press icon */}
            <View style={styles.leftItem}>
                {/* Back icon should be here.. */}
            </View>
            {/* Stack title */}
            <View style={styles.textWrapper}>
                <Text style={[options.headerTitleStyle, styles.titleText]} numberOfLines={1}>
                    { options.title }
                </Text>
            </View>
            {/* Settings icon */}
            <View style={styles.rightItem}>
                { options.headerRight() }
            </View>
        </View>
    </View>
)}

感谢您的每一个回答

4

1 回答 1

0

这是一个示例。

import * as React from 'react';
import { View, Text, Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: () =>
        Platform.select({
          android: <Text>{'Left android'}</Text>,
          ios: <Text>{'Left ios'}</Text>,
        }),
      headerRight: () =>
        Platform.select({
          android: <Text>{'Right android'}</Text>,
          ios: <Text>{'Right ios'}</Text>,
        }),
    });
  }, []);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
import * as React from 'react';
import { View, Text, Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: () =>
        Platform.select({
          android: <Text>{'Left android'}</Text>,
          ios: <Text>{'Left ios'}</Text>,
        }),
      headerRight: () =>
        Platform.select({
          android: <Text>{'Right android'}</Text>,
          ios: <Text>{'Right ios'}</Text>,
        }),
    });
  }, []);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
于 2021-11-18T15:54:26.880 回答