ScrollView не показывает все и обрезается

Question

Мне нужен этот экран, чтобы показать все содержимое , которое находится внутри прокрутки, я пробовал все, устанавливая flexGrow ScrollView в 1, flex родительского просмотра в 100. Просмотр прокруткипрокручивая вниз до итерации Bark Central Dog Park & ​​Cafe, но он обрезан наполовину и больше не может прокручиваться, также я заметил, что текст HELP ME также не найденБольшое вам спасибо, так как эта проблема беспокоит меня и мой прогресс в реакции родного.

Пожалуйста, скажите мне, что я должен делать и где я ошибся.Еще раз спасибо!

NotificationScreen.js

export default class NotificationScreen extends Component 
{
static navigationOptions = ({ navigation }) => {
    const { state } = navigation;
        const {} = state;
        return {  
          header: null,
        };

}
render() {
    return (
        <View style={styles.parentContainer}>
            <View style={{flexDirection: 'row', marginLeft: '5%', marginTop: '5%'}}>
                    <TouchableOpacity onPress={() => this.props.navigation.navigate('JobFeedScreen')}>
                        <Entypo name="chevron-thin-left" color={Colors.red} size={30} />
                    </TouchableOpacity>

                    <View style={{marginLeft: 80,}}>
                        <Text style={{ fontFamily: 'CoreSansD65Heavy',color: Colors.semiGray, fontSize: 25,}}> Ty, Next</Text>
                    </View>

                    <TouchableOpacity onPress={()=> this.props.navigation.navigate('LaunchScreenStack')} style={{marginLeft: 87,marginRight: '5%',}}>
                        <SimpleLineIcons name='bubbles' color={Colors.red} size={30} /> 
                    </TouchableOpacity>
            </View>
            <View style={{marginLeft: '5%'}}>
                <Text style={styles.notificationHeader}> Notifications</Text>
            </View>

            <ScrollView  horizontal={false} overScrollMode={'auto'}>
               <TouchableOpacity style={styles.notifPlace}>
                    <View style={styles.notifTextPlace}>

                    </View>
                    <Text style ={styles.text}>Anteriore, Inc.</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.notifPlace}>
                    <View style={styles.notifTextPlace}>

                    </View>
                    <Text style ={styles.text}>The Palace Manila</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.notifPlace}>
                    <View style={styles.notifTextPlace}>

                    </View>
                    <Text style ={styles.text}>Boozy.ph</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.notifPlace}>
                    <View style={styles.notifTextPlace}>

                    </View>
                    <Text style ={styles.text}>Pet warehouse PH</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.notifPlace}>
                    <View style={styles.notifTextPlace}>

                    </View>
                    <Text style ={styles.text}>Bark Central Dog Park & Cafe</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.notifPlace}>
                    <View style={styles.notifTextPlace}>

                    </View>
                    <Text style ={styles.text}>Pet warehouse PH</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.notifPlace}>
                    <View style={styles.notifTextPlace}>

                    </View>
                    <Text style ={styles.text}>Bark Central Dog Park & Cafe</Text>
               </TouchableOpacity>
               <Text> PLEASE HELP ME </Text>
               <Text> PLEASE HELP ME </Text>   
               <Text> PLEASE HELP ME </Text>            
               <Text> PLEASE HELP ME </Text>   
        </ScrollView>
        </View>



    );
}

NotificationScreenStyles.js

import { StyleSheet } from 'react-native'
import { Metrics, ApplicationStyles, Colors } from '../../Themes/'

export default StyleSheet.create({
  ...ApplicationStyles.screen,
  container: {
paddingBottom: Metrics.baseMargin
  },
  logo: {
    marginTop: Metrics.doubleSection,
    height: Metrics.images.logo,
    width: Metrics.images.logo,
    resizeMode: 'contain'
  },
  centered: {
    alignItems: 'center'
  },
  parentContainer: {
    flex:1, 
    backgroundColor: Colors.white
  },
  notificationHeader: {
    justifyContent: 'flex-start', 
    fontFamily: 'CoreSansD45Medium',
    marginTop: 40,
    marginBottom: 20,
    fontSize: 20,
    color: Colors.gray,
    textAlign: 'left',
  },
  notifPlace: {
    flexGrow: 0,
    flexDirection: 'row',
    backgroundColor: Colors.white, 
    width: '100%', 
    height: '12%',
    borderWidth: 0.5,
    borderColor: Colors.buttonGray,
  },
  notifTextPlace: {
    width:60,
    height:60,
    borderRadius: 60/2, 
    backgroundColor:Colors.buttonGray ,
    alignSelf: 'center', 
    justifyContent: 'flex-start', 
    marginLeft: '5%', 
    marginRight: 10,
    marginBottom: 20,
    marginTop: 20,
  },
  text: {
    fontFamily: 'CoreSansD45Medium',
    fontSize: 15, 
    alignSelf: 'center', 
    color: Colors.gray,
    marginBottom: 10,
  },
  text2: {
    alignSelf: 'center',
    fontFamily: 'CoreSansD35Regular',
    fontSize: 15,
    marginBottom: 10,
  },
})

Снимок экрана 1:

SC1

Снимок экрана 2: (он прокручивается только здесь)

SC2

Answer 1

Это известная проблема в представлении прокрутки собственного кода реакции, используйте paddingBottom : 100 в стилях представления прокрутки.

Значение 100 можно установить на любое значение в соответствии с имеющимся у вас содержимым

Answer 2

Пожалуйста, предоставьте свою таблицу стилей и снимок экрана с тем, что вы видите.

Тест для добавления height = Dimensions.get ('window'). Height для parentContainer

Также попробуйте paddingBottom к вашемуscrollview StyleSheet