在不同组件之间导航 React Native

Question

所以我一直在尝试了解如何执行此操作大约 2 个小时，但我似乎无法弄清楚。我希望在单击按钮时能够从一个组件转到另一个组件。

First.js

import React, {useState} from 'react';
import { StyleSheet, StatusBar, SafeAreaView, View, Text } from 'react-native';
import {Button} from 'react-native-elements';

import { Second } from './Second.js';


export class Information extends React.Component {
    
    render() {
        return (
        <SafeAreaView style={styles.container}>
                <View style={styles.footer}>
                    <View style={styles.footerBtn}>
                    <Button 
                        titleStyle={{
                            fontSize: 16,
                        }}
                        buttonStyle={{
                            backgroundColor: '#007AFF'
                        }}
                        raised={true}
                        title="Continue"
                        onPress={() => { this.props.navigation.navigate(Second) }}
                        color="#007AFF"
                    />
                    </View>
                </View>
        </SafeAreaView>
        );
    }
}

Second.js

import React from 'react';
import { StyleSheet, StatusBar, SafeAreaView, Dimensions, View, Text } from 'react-native';

export class Postcode extends React.Component {
    render() {
        return (
        <SafeAreaView style={styles.container}>
            <StatusBar />
            <Text> Wow this is a cool second page</Text>
        </SafeAreaView>
        );
    }
}

所以我用所有额外的东西删掉了一些我的代码，但上面是两个基本文件。它们都在同一个文件夹中，当我单击按钮时，我希望能够从第一页转到第二页。我觉得我很笨，答案很明显，但我就是想不通。

Answer 1

我认为最好的方法是使用 Stack Navigation，就像我拥有的这个项目示例：

堆栈组件：

  import React from 'react';

  import Home from '../pages/Home';
  import Sales from '../pages/Sales';
  import NewSale from '../pages/Sales/NewSale';

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

  const Stack = createStackNavigator();

  function Stacks() {
    return (
      <Stack.Navigator>
        <Stack.Screen name='Home' component={Home} options={{ headerShown: false }} />
        <Stack.Screen name='Negociação' component={Sales} />
        <Stack.Screen name='Nova Negociação' component={NewSale} />
      </Stack.Navigator>
    );
  }

  export default Stacks;

我点击按钮导航的位置：

import React from 'react';
import * as S from './styles';

export default function Sales({ navigation }) {
    return (
        <S.Container>

            <S.Add
                onPress={() => navigation.navigate('Nova Negociação')}>
            </S.Add>

        </S.Container>
    )
}

app.tsx或app.js

import 'react-native-gesture-handler';

import { NavigationContainer } from '@react-navigation/native';
import React from 'react';
import { StatusBar } from 'react-native';
import styles from './styles/styles';

import Stacks from './stackNav';

const App: React.FC = () => (
  <NavigationContainer>
    <StatusBar barStyle="light-content" backgroundColor={styles.primaryColor} />
    <Stacks />
  </NavigationContainer>
);

export default App;

编辑：检查这个博览会小吃：https://snack.expo.dev/@guilhermemoretto12/react-native-stack-navigator-example

在不同组件之间导航 React Native

Navigate between different components React Native

javascript

reactjs

react-native

react-navigation