在 header 中反应本机图标以一直向左对齐

Question

我想在屏幕左上角放一个图标。在堆栈导航器的 header 中 ...

<Stack.Screen name="Menu" component={HomeScreen} 
      
      options={({ route }) => ( {
        headerTitle: (props) => <View style={{flexDirection:'row', flex:1, justifyContent:"center", borderColor:"black", borderWidth:1, alignSelf:"stretch"}}>
                                <Text style={{ fontSize:config.headerFontSize, fontWeight:config.headerFontWeight}}>{config.titleMainMenu}</Text>
                                {__DEV__  && 
                                
                                    <Ionicons name="settings-outline" size={30} color={config.foregroundColor}></Ionicons>
                                
                                }
                                <View style={{alignItems:"flex-end"}}>
                                <Ionicons name="person-outline" size={30} color={config.foregroundColor} ></Ionicons>
                                </View>
                                </View>
                                ,
        headerStyle: {
            backgroundColor: config.backGroundColor
          },
        headerTintColor: config.foregroundColor,
        headerBackTitle:" "
    })} />

我希望 icon-person 出现在屏幕的最右侧...见下图 ..我显然希望它在 iphone 和 android 上工作两个都。我想我能够通过在 8/10 和 2/10 中拆分视图在 android 中实现一次，但它在 iphone...

中不起作用

Answer 1

左边只用headerLeft:

或

headerRight 右边为右边

see here

Answer 2

要在堆栈导航器的 header 屏幕左上角放置一个图标，请使用 headerLeft 属性在 Stack.Screen

的 options 内

  headerLeft: () => (
    <Button
      onPress={() => alert('This is a button!')}
      title="Info"
      color="#fff"
    />

在 header 中反应本机图标以一直向左对齐

react native icon in header to align all the way to left

react-native

react-native-android

react-native-ios