0

我正在尝试为后退按钮实现自定义图像。我正在使用 react-navigation 5.xx 这是我的 AppNavigator：

const Stack = createStackNavigator();

class MyCustomHeaderBackImage extends React.Component {
  render() {
    return (
        <Image
          source={require('../../../res/images/back-button.png')}
          style={{width: 22, height: 22, tintColor: '#f00'}}
        />
    );
  }
}

function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Screen1">
        <Stack.Screen
          name="Screen1"
          component={Screen1}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Screen2"
          component={Screen2}
          options={{
            headerBackTitleVisible: false,
            title: '',
            headerTintColor: '#fff',
            headerStyle: {
              backgroundColor: colors.blue,
              shadowColor: 'transparent',
            },
            headerBackImage: <MyCustomHeaderBackImage/>,
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppNavigator;

使用此代码，当我访问时Screen2，它会失败并显示消息backImage is not a function

我尝试了哪些其他选择：

  1. 将代码更改为：headerBackImage: () => (<MyCustomHeaderBackImage/>). 这失败并显示消息Invariant violation: Element type is invalid: expected a string but got: object
  2. 使用<Image />代替MyCustomHeaderBackImage并尝试不同类型的调用，例如headerBackImage: () => (<Image source={require('../../../res/images/email.png')} />)
  3. 遵循https://github.com/react-navigation/react-navigation/blob/2c7187b22aeff1cdec5ca6aeebb40c9c798c0888/examples/NavigationPlayground/js/StackWithCustomHeaderBackImage.js的确切实施- 只是我使用options的而不是navigationOptions，因为我使用的是 react-navigation 5 .xx

不幸的是，上述方法都没有奏效。关于如何为后退按钮使用自定义图像的任何想法？

4

2 回答 2

1

我放弃了，headerBackImage因为我永远无法让它工作。我认为 RN5 还是有点问题。无论如何，我使用这样的自定义标头组件来解决它：

 const MyCustomHeaderBackImage = () => (
  <View style={{ flexDirection: "row", justifyContent: "center", alignItems: "center", marginLeft: 4 }}>
    <Image source={require("../images/backArrow.png")} style={{ width: 20, height: 20 }} />
  </View>
);

然后在堆栈导航器中，我将其添加到堆栈组件中：

  <Stack.Screen
      name="Screen Name"
      component={ScreenIWantToUse}
      options={({ navigation, route }) => ({
        headerBackTitleVisible: false,
        headerLeft: () => (
            <TouchType onPress={() => navigation.navigate("Home")}>
              <View style={{ flexDirection: "row", justifyContent: "center", alignItems: "center", marginLeft: 4 }}>
                <MyCustomHeaderBackImage />
                <Text style={{ color: "#fff", fontSize: 20 }}>Back</Text>
              </View>
            </TouchType>
        ),
        headerTitleStyle: { fontSize: 25, color: "#fff" },
        headerStyle: { backgroundColor: "#333" },
       
  .... etc

headerLeft覆盖默认按钮。

同时，回到现实世界，我使用 Platform 在 iOS 上要求带有“Back”字样的 V 形图像，或者在 Android 上要求自定义组件中的左箭头。然后在headerLeft函数中，我还使用 Platform 来显示任一平台的视图，如下所示：

  const MyCustomHeaderBackImage = () => (
   <View style={{ flexDirection: "row", justifyContent: "center", alignItems: "center", marginLeft: 4 }}>
     <Image source={Platform.OS === "ios" ? require("../images/backArrow.png") : require("../images/backArrowAndroid.png")} style={{ width: 20, height: 20 }} />
   </View>
 );

那么这个...

  headerLeft: () => (
          Platform.OS === "ios" ?
            <TouchType onPress={() => navigation.navigate("Home")}>
              <View style={{ flexDirection: "row", justifyContent: "center", alignItems: "center", marginLeft: 4 }}>
                <MyCustomHeaderBackImage />
                <Text style={{ color: "#fff", fontSize: 20 }}>Back</Text>
              </View>
            </TouchType>
            :
            <TouchType onPress={() => navigation.navigate("Home")}>
              <View style={{ flexDirection: "row", justifyContent: "flex-start", alignItems: "center", paddingLeft: 8, width: 50, height: 50 }}>
                <MyCustomHeaderBackImage />
              </View>
            </TouchType>
        ),
   ...etc

我发现文档给你一个方法但从来没有告诉你如何使用它真的很烦人。无论如何，它有效。

于 2020-08-21T16:52:56.910 回答
0

这就是它的工作原理。十字架是我拥有图像的组件。也可以在各个画面的选项中进行。

screenOptions: {{
    headerBackImage: () => <Cross style={{ marginLeft: 10 }} />
}}
于 2021-02-25T06:46:49.620 回答