Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Cara menggunakan kaedah navigasi bertindak balas

Cara menggunakan kaedah navigasi bertindak balas

藏色散人
Lepaskan: 2023-01-04 16:42:11
asal
2347 orang telah melayarinya

navigasi tindak balas akan menyuntik navigasi ke dalam prop semua halaman penghalaan berdaftar Cara menggunakannya: 1. Buat laluan utama melalui "const Main = createStackNavigator({...})"; createBottomTabNavigator" "Buat bar tab bawah; 3. Buat laluan suis khas melalui "createSwitchNavigator", dsb.

Cara menggunakan kaedah navigasi bertindak balas

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk menggunakan kaedah navigasi bertindak balas?

react-navigation Kaedah biasa

react-navigation ialah pengurus penghalaan yang digunakan oleh projek rn; selain menyediakan pengurusan sejarah penghalaan, terdapat juga komponen UI navigator! ;

react-navigation akan menyuntik navigasi ke dalam prop semua halaman laluan berdaftar!!!

1 Cipta laluan utama;

createStackNavigator

. di mana Termasuk pada asasnya semua penghalaan halaman yang digunakan dalam projek;

const Main = createStackNavigator({
    Tab: {
        screen: Tab,
        navigationOptions:{
            header:null
        }
    }
     。。。
},{
    initialRouteName :'Tab',   
})
Salin selepas log masuk

2. Cipta bar tab bawah; halaman utama apl

3 Cipta laluan suis khas, halaman sebelum melompat tidak akan memasuki timbunan sejarah

const Tab = createBottomTabNavigator({
    Home: {
        screen: Home,
        navigationOptions:{
            header:null,
            title:'最热',
            tabBarIcon:({focused,tintColor})=>{
                return (
                    <MCIcon name="chili-hot"  size={16} color = {focused?tintColor:&#39;#404040&#39;}></MCIcon>
                )
            }    
        }
    },
   。。。
},{
    initialRouteName :&#39;Home&#39;,
    tabBarOptions:{
        activeTintColor:&#39;#1d85d0&#39; 
    }
})
Salin selepas log masuk
4 akan menduduki kedudukan bar navigasi

createSwitchNavigator
//欢迎页跳转不可返回
const Navigation = createSwitchNavigator({
    Init:Init,
    Main:Main
},{
    initialRouteName :&#39;Init&#39;
})
Salin selepas log masuk
5.navigationOptions sifat konfigurasi yang biasa digunakan

headerTtile: page title
createMaterialTopTabNavigator
export default class Home extends Component {
  render() {
    const TabNav = createMaterialTopTabNavigator({
      Tab1:{
        screen: Tab1,
        navigationOptions:{
            title:&#39;tab1&#39;,
            header:null
        }
      }
。。。
   
    },{。。。}) 
    return (
      <TabNav/>
    ) 
  }
}
Salin selepas log masuk

headerTitleStyle: gaya teks tajuk

headerStyle: title as a whole Style

6 Atribut rujukan bahagian tab

Komponen BottomTabBar juga boleh menggunakan atribut ini

7 >
tabBarOptions - 具有以下属性的对象:
activeTintColor -活动选项卡的标签和图标颜色。
activeBackgroundColor -活动选项卡的背景色。
inactiveTintColor -"非活动" 选项卡的标签和图标颜色。
inactiveBackgroundColor -非活动选项卡的背景色。
showLabel -是否显示选项卡的标签, 默认值为 true。
showIcon - 是否显示 Tab 的图标,默认为false。
style -选项卡栏的样式对象。
labelStyle -选项卡标签的样式对象。
tabStyle -选项卡的样式对象。
allowFontScaling -无论标签字体是否应缩放以尊重文字大小可访问性设置,默认值都是 true。
safeAreaInset - 为 <SafeAreaView> 组件重写 forceInset prop, 默认值:{ bottom: &#39;always&#39;, top: &#39;never&#39; }; top | bottom | left | right 的可选值有: &#39;always&#39; | &#39;never&#39;。
Salin selepas log masuk
Biasanya kami Gunakan ini.props.navigation pada halaman yang perlu dikembalikan untuk mendapatkan objek props navigasi; prasyarat untuk ini ialah this.props. Navigasi mestilah navigasi halaman semasa; iaitu, anda boleh menyemak this.props.navigation.state.routeName untuk menilai:

Dalam beberapa kes khas, seperti sebagai pertimbangan pemulangan kunci pemulangan Android, acara pemulangan mungkin tidak berada dalam tangkapan Halaman itu, kerana acara pemulangan BackHandler akan diteruskan ke atas maka this.props.navigation mungkin bukan objek navigasi yang perlu digulung semula; jadi penggunaan go.Back() tidak akan berjaya; atau dalam sesetengah kes, objek navigasi tidak semestinya mempunyai kaedah goBack(), yang juga akan menyebabkan masalah ini;

>

Halaman utama ialah laluan peringkat pertama, halaman butiran ialah laluan peringkat kedua, dan kedua-dua halaman ditetapkan Fungsi panggil balik BackHandler jika BackHandler secara terperinci tidak ditangkap oleh halaman semasa, ia akan dihantar ke fungsi panggil balik BackHandler di rumah; maka this.props.navigation di rumah merujuk kepada halaman utama, bukan perincian, jadi Memanggil goBack juga tidak akan berjaya! ! !

Penyelesaian:

this.props.navigation.goBack()
Salin selepas log masuk

Gunakan NavigationActions;

Semua NavigationActions mengembalikan objek yang boleh dihantar ke penghala menggunakan kaedah navigation.dispatch().

Menyokong operasi berikut:

Navigasi - Navigasi ke laluan lain

Kembali - Kembali ke keadaan sebelumnya Set Params - Tetapkan parameter untuk Parameter laluan yang diberikan

Init - digunakan untuk memulakan keadaan pertama apabila keadaan tidak ditentukan

Lihat dokumentasi untuk butiran: https://reactnavigation.org/docs/zh-Hans/navigation -actions.html

Pas:

untuk melaksanakan operasi pemulangan;

Nota: Kaedah

dispatch() ada dalam ini. props.navigation

disyorkan pembelajaran: "

tutorial video bertindak balas

"

Atas ialah kandungan terperinci Cara menggunakan kaedah navigasi bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan