Cara melaksanakan lompat penghalaan asli bertindak balas

Cara melaksanakan lompatan penghalaan asli bertindak balas: 1. Gunakan arahan "navigasi tambah benang" untuk memasang "navigasi tindak balas" 2. Gunakan arahan "pengendali gerak balas benang"; untuk memasang komponen "react-native-gesture-handler" 3. Tetapkan laluan awal dan kemudian eksportnya sebagai komponen kelas.

Persekitaran pengendalian tutorial ini: sistem Windows 10, React Native versi 0.67, komputer Dell G3.

Bagaimana untuk melaksanakan lompat laluan asli bertindak balas?

React Native-Route Jump

Selepas menyediakan persekitaran pembangunan RN, lompatan antara berbilang halaman mesti dilaksanakan.

1. Pada masa ini, anda perlu memasang navigasi-tindak balas (Navigator dan bekas Navigasi sebelumnya telah ditinggalkan), gunakan perintah navigasi tambah benang untuk memasang.

2.react-navigation bergantung pada komponen pengendali gerak isyarat-react-native, jadi ia juga perlu dipasang menggunakan perintah add react-native-gesture-handler yarn.

3 Selepas kedua-dua komponen berjaya dipasang, daftarkan komponen Apl dalam index.js (fail kemasukan, mungkin index.android.js atau index.ios.js), rujuk Sejak. setup.js.

4 Import createStackNavigator, createAppContainer dua fungsi dan dua halaman dalam setup.js.

import { createStackNavigator, createAppContainer } from "react-navigation";
import { Login } from "./js/pages/login";
import { ScanDevice } from "./js/pages/scanDevice";

5 Gunakan createStackNavigator untuk merangkum konfigurasi penghalaan dan tajuk bagi dua halaman, dan tetapkan penghalaan awal.

const AppNavigator = createStackNavigator({
    Login: {
        screen:Login,
        navigationOptions: {
            title: '冷链物流助手',
            headerTitleStyle:{
                textAlign: 'center',
                flex:1,
            }
        }
    },
    ScanDevice: {
        screen:ScanDevice,
        navigationOptions: {
            title: '扫描设备',
            headerTitleStyle:{
                textAlign: 'center',
                marginLeft:-25,
                flex:1,
            }
        }
    },
},{
    initialRouteName: 'Login'
});

6 Bungkus AppNavigator yang dikonfigurasikan dengan fungsi lain createAppContainer, dan kemudian eksportnya sebagai komponen kelas.

const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

7. Jalankan react-native run-android Jika terdapat ralat, tanya Google untuk menyelesaikannya langkah demi langkah. Jika Ralat Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED berlaku, sila ikuti https://www.php.cn/link/be47acb6bb8806ab820fd1081686a767 untuk menyelesaikannya.

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Cara melaksanakan lompat penghalaan asli bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!