Question

我使用react-navigation作为我的导航库，我想知道如何更改＆＃39;返回＆＃39;按钮（由react-navigation自动添加）特定屏幕的功能？

我的意思是不是在屏幕堆栈中走一步，而是希望它在堆栈中向后走两步。或者通过给它一个屏幕名称（仅在一个组件上）手动完成。

感谢。

Answer 1

考虑一下，您分别拥有3个屏幕A，B，C。因此，StackNavigator中后退按钮的默认功能是：- 如果您在屏幕C上按返回按钮，它将带您到前一个屏幕，即屏幕B。要覆盖它，您可以在屏幕C上执行以下操作：-

import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
  return{
    headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('A')}}/>)
 }
}

Answer 2

如果您使用的是版本5，并且正在处理功能组件，则可以使用布局效果钩子来完成此操作（example from the docs reference）：

function ProfileScreen({ navigation, route }) {
  const [value, onChangeText] = React.useState(route.params.title);

  React.useLayoutEffect(() => {
    navigation.setOptions({
      title: value === '' ? 'No title' : value,
    });
  }, [navigation, value]);

请注意，如果您要更改headerLeft，则可能需要向其传递函数（GH issue reference）。

Answer 3

您也可以在创建堆栈导航器时执行此操作。从反应导航v4开始更新。

<tbody>
  <tr v-for="data in dtValue">
    <td>{{data[key1]}}</td>
    <td>{{data[key2]}}</td>
    <td>{{data[key3]}}</td>
    <td>{{data[key4]}}</td>
    <td>{{data[key5]}}</td>
  </tr>
</tbody>

Answer 4

默认使用 HeaderBackButton 组件。您可以实现它并使用它来覆盖后退按钮样式，按下道具，例如：链接到 docs

import { HeaderBackButton } from '@react-navigation/stack';

const styles = StyleSheet.create({
  custom: {
  // Custom styles here
  }
});

<Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <HeaderBackButton
        {...props}
        style={styles.custom}
        onPress={() => {
        // Do something
        }}
      />
    ),
  }}
/>;

如果你想要完全控制，你可以使用你的自定义后退按钮组件，例如：

import { CustomBackButton } from 'path/to/custom/component';

<Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <CustomBackButton {...props} />
    ),
  }}
/>;

Answer 5

您可以使用该屏幕的navigationOptions覆盖特定屏幕的后退按钮。您可以在react-navigation docs

中阅读有关覆盖后退按钮的更多信息

来自文档的示例

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
    headerRight: (
      <Button
        onPress={() => alert('This is a button!')}
        title="Info"
        color="#fff"
      />
    ),
  };
}

覆盖后退按钮

后退按钮将自动呈现在StackNavigator中   只要用户可以从他们的当前回来   屏幕 - 换句话说，后退按钮将在任何时候呈现   堆栈中有多个屏幕。

一般来说，这就是你想要的。但有些人可能会这样做   您想要自定义后退按钮的情况比您更多   可以通过上面提到的选项，在这种情况下你可以指定   一个headerLeft，就像我们对headerRight所做的一样，完全如此   覆盖后退按钮。

在特定屏幕上使用react-navigation修改后退按钮

5 个答案: