Cara menggunakan kaedah navigasi bertindak balas

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.

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',   
})

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; 
    }
})

4 akan menduduki kedudukan bar navigasi

createSwitchNavigator
//欢迎页跳转不可返回
const Navigation = createSwitchNavigator({
    Init:Init,
    Main:Main
},{
    initialRouteName :'Init'
})

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:'tab1',
            header:null
        }
      }
。。。
   
    },{。。。}) 
    return (
      <TabNav/>
    ) 
  }
}

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;。

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()

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!