Question

我需要此屏幕来 显示滚动视图中的所有内容 ，我已经尝试了将ScrollView的flexGrow设置为1并将父视图的flex设置为100的所有方法。 scrollview一直向下滚动，直到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

请提供您的StyleSheet和屏幕截图。

测试添加高度= Dimensions.get（'window'）。height 给你的parentContainer

也可以尝试paddingBottom到您的滚动视图StyleSheet

Answer 2

这是react native滚动视图中的一个已知问题，在滚动视图的样式中使用paddingBottom : 100。

可以根据您的内容将100设置为任何值

Answer 3

刚刚遇到这个问题，最终为我解决的是确保我的滚动视图不是布局中的最后一个组件。所以我在我的滚动视图之后添加了一个不可见的组件（设置了高度以抵消我看不到的滚动视图内容的数量）。

Answer 4

就我而言，我为 ScrollView 的包装组件添加了一个高度。它对我有用

例如：-

<View style={{ height: hp(500) }}>
   <ScrollView showsVerticalScrollIndicator={false}>
      {filteredItems.map((item) => <Text style={styles.listItemText}>{item.title}</Text>)}
   </ScrollView>
</View>

ScrollView没有显示所有内容并且被切断

4 个答案: