كيفية إنشاء شريط علامات تبويب أعلى للتمرير والحيوية باستخدام التنقل التفاعلي

هذا مقالتي الأولى عن "متوسطة" ، آمل أن تكون مفيدة لك: D ، لذلك ، وفقًا لمعرفتي في الإصدار 2 من رد الفعل-الملاحة ، سنقوم اليوم بإنشاء شريط علامات تبويب أعلى قابل للتمرير وديناميكي باستخدام التنقل التفاعلي مثل هذا:

عرض

لنبدأ

أنا استخدم:

"رد الفعل الأصلي": "0.55.1" ،
"رد فعل": "16.3.1" ،
"react-navigation": "^ 2.16.0"

تخيل لو أنك جلبت مجموعة من البيانات على سبيل المثال

الفئات = ["الرجال" ، "المرأة" ، "الأطفال" ، "الشباب" ، "الأقدم"]

وتريد تعيينها في علامات تبويب ، والتي قد تكون قابلة للتغيير 2 أو 5 أو 22 عنصرًا ولا يمكن أن يحتوي عرض الشاشة على كل هذا ، وبالتالي فإن الفكرة الأولى ستحصل على وضع "التمرير الأفقي" !!

استيراد {Header ، createTabNavigator ، TabNavigator} من 'react-navigation'
استيراد تم التحديد من ". / محدد"
علامات التبويب = التنقل => {
    دع الفئات = ["الرجال" ، "المرأة" ، "الأطفال" ، "الشباب" ، "الأقدم"]
Categories = classes.reduce ((val، tab) => {
      val [علامة تبويب] = {
        الشاشة: مختارة
      }
      عودة فال
    } ، {})
const علامات التبويب = createTabNavigator (
      {
        ...التصنيفات
      }،
      {
        ... TabNavigator.Presets.AndroidTopTabs،
        lazyLoad: خطأ ،
        tabBarOptions: {
          التمرير: صحيح ،
          أسلوب: {
            backgroundColor: Colors.snow ،
            الارتفاع: رأس. الارتفاع - 15
          }،
          tabStyle: {
            العرض: 100
          }،
          مؤشرالنمط: {
            العرض: 0
          }
        }
      }
    )
إرجاع <علامات التبويب />
  }
يجعل () {
    const {navigation} = this.props
    إرجاع (
      <عرض النمط = {styles.container}>
          {this.Tabs (الملاحة)}
      
    )
  }
سيؤدي هذا الرمز إلى عرض الشاشة على علامات تبويب قابلة للتمرير.

في التنقل التفاعلي ، إذا كنت بحاجة إلى إنشاء علامات تبويب عليا ، فيمكنك استخدام:

createTabNavigator (RouteConfigs، TabNavigatorConfig)؛

أولاً ، يمكنني تقليل صفيفتي للحصول على RouteConfigs لجميع الشاشات مثل:

KeyOfScreen: {
  الشاشة: "ContainerScreen"
}

ثم قمت بنشر "TabNavigator.Presets.AndroidTopTabs" في TabNavigatorConfig الخاص بي لتحسينه من AndroidTopTabs وتخصيص tabBarOptions عن طريق وضع "scrollEnabled: true" وأسلوب علامة التبويب.

الفئة الافتراضية للتصدير تمدد شاشة التوقف المحددة
  إبحار ثابت = ({navigation}) => ({
    tabBarLabel: ({focus}) => (
      <مشاهدة
        النمط = {{
          العرض: 80
          راديوس: 30
          الحشو: 10 ،
          backgroundColor: تركز؟ Colors.primary2Color: Colors.snow ،
          alignItems: "center" ،
          justifyContent: "center"
        }}
      >
        نص <
          النمط = {{
            اللون: تركز؟ Colors.snow: Colors.decs ،
            حجم الخط: 12
          }}
        >
          {navigation.state.routeName}
        
      
    )
  })؛
منشئ (الدعائم) {
    السوبر (الدعائم)؛
    هذا. الدولة = {
      شاشة: ''
    }؛
  }
screenIs = الحمولة => {
    this.setState ({screen: payload.state.routeName})
  }
  
  يجعل() {
    const {navigation} = this.props؛
    إرجاع (
      <مشاهدة
        النمط = {styles.container}
      >
        
        <نص> {this.state.screen} 
      
    )؛
  }
}
سيؤدي هذا الرمز إلى عرض شاشة علامة التبويب الخاصة بالأطفال والاستماع إلى علامة التبويب النشطة.

بعد ذلك ، تحتوي شاشة childer "المحددة" على نص علامة التبويب النشطة. إن NavigationEvents عبارة عن مكون React يوفر واجهة تعريفية للاشتراك في أحداث التنقل. سوف تشترك في أحداث التنقل على التحميل وإلغاء الاشتراك عند إلغاء التثبيت. يمكنك أيضا استخدام تلك لتناسب وضعك

onDidFocus = {payload => console.log ("did focus"، payload)}
onWillBlur = {payload => console.log ("will blur"، payload)}
onDidBlur = {payload => console.log ("did blur"، payload)}

هذا كل شيء

عني

باختصار: أنا مهندس هندسة في Shopz.io ، لديّ خبرة لمدة عامين في مجال تطوير الأجهزة المحمولة باستخدام react-native ، وتطوير أيضًا باستخدام ReactJs و nodeJs و GraphQl و Apollo-Client و Redux و Parse SDK ... إلخ ،

هل أحببتها؟ التصفيق ، واتبع!

إذا رأيت شيئًا ما خطأ أو تحسنت ، فيرجى ترك تعليق وبالتأكيد إذا كنت بحاجة إلى مساعدة في تطبيق React Native الخاص بك فلا تتردد في الاتصال بي ؛) ، سأكون سعيدًا بمناقشته.
ينكدين ، جيثب ، الفيسبوك