Question

我目前正在构建一个react native应用程序，并且正在使用堆栈导航器在我的应用程序的屏幕之间导航。当前，在我的App.js中，屏幕以以下格式存储：

const Stack = createStackNavigator();

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="screen1">
          <Stack.Screen name="screen1" component={Screen1}></Stack.Screen>
          <Stack.Screen name="screen2" component={Screen2}></Stack.Screen>
        </Stack.Navigator>
      </NavigationContainer>
  );
}

用户进入屏幕1之后，我希望能够通过按一下按钮导航到屏幕2。我通读了文档，仅看到了有关如何使用功能组件执行此操作的示例，例如：

function Screen1({ navigation }) {
  return (
    <View>
      <Button title="Go to Home" onPress={() => navigation.navigate('screen2')} />
    </View>
  );
}

但是我该如何使用类组件呢？

class Screen1 extends Component {

    render() {
        return(
            <View>
               // This does not work because I do not know how to pass in the navigation object
               <Button title="Go to Home" onPress={() => navigation.navigate('screen2')} />
            </View>
        )
    }
}

我将{ navigation }传递到哪里？

Answer 1

您不必通过导航，它可以作为道具来传递。

您可以按以下方式访问它

this.props.navigation.navigate('nextScreen')

Answer 2

1：import { Link, withRouter } from 'react-router-dom';

2：export default withRouter(Component);

Login = () => {
  this.props.history.push("/login")
}

使用类组件响应本机堆栈导航

2 个答案: