اذهب إلى المحتوى

السؤال

نشر

إذا قمت بعمل ScrollView يعمل التطبيق بشكل ممتاز ويمكن للمستخدم أن يقوم بالتمرير Scroll إلى الأسفل والأعلى بدون مشكلة:

return(
    <ScrollView>
        <Text>Some Contgent</Text>
        <Text>Some Contgent</Text>
        <Text>Some Contgent</Text>
        <Text>Some Contgent</Text>
        <Text>Some Contgent</Text>
        <Text>Some Contgent</Text>
        <Text>Some Contgent</Text>
        <Text>Some Contgent</Text>
  
        {/* ... */}
  
    </ScrollView>
);

لكن تظهر لي مشكلة إن قمت بإضافة المكون ScrollView داخل مكون View:

return(
    <View>
        <ScrollView>
                <Text>Some Contgent</Text>
                <Text>Some Contgent</Text>
                <Text>Some Contgent</Text>
                <Text>Some Contgent</Text>
                <Text>Some Contgent</Text>
                <Text>Some Contgent</Text>
                <Text>Some Contgent</Text>
                <Text>Some Contgent</Text>
  
                {/* ... */}
  
        </ScrollView>
    </View>
);

حينها لا يمكن للمستخدم أن يقوم بالتمرير إلى الأسفل على الإطلاق، هل يوجد حل لهذه المشكلة في React Native؟

Recommended Posts

  • 1
نشر

يمكن حل المشكلة بإضافة تنسيقين

  • flex = 1 للعنصر view
  • contentContainerStyle={{ flexGrow: 1 }} للعنصر ScrollView

return(
  <View style={{flex: 1}}>
    <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
      ..
    </ScrollView>
  </View>
);

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...