时间戳

首页 > 解决方案 > ScrollView 不显示反应原生的所有内容

react-native - ScrollView 不显示反应原生的所有内容

问题描述

我有一个包含一些组件的页面。我正在使用滚动视图滚动页面，但某些内容没有显示。这是我的代码：

render() {
const screenHeight = Dimensions.get('window').height
const {currentItem,callsData}=this.state;
return (
  <SafeAreaView style={CustomStyles.container}>
    <View style={{flexDirection:'row-reverse',padding:10}}>
      <View style={{flex:1,justifyContent:'center',flexDirection:'row'}}>
        <CustomText style={[CustomStyles.titleWhite]}>Sponsers</CustomText></View>
      <TouchableWithoutFeedback onPress={()=>this.props.navigation.goBack()} style={{marginLeft:20,padding:10,}}>
        <Icon name='md-arrow-round-back' color={'white'} size={32} />
      </TouchableWithoutFeedback>
    </View>
  <ScrollView contentContainerStyle={{flexGrow:1,height:screenHeight}}>
    <View>
    {(this.state.done===1)?
    <View >
    <CustomText style={[CustomStyles.titleWhite,{alignSelf: 'center',}]}> {currentItem.title} </CustomText>
    <Image style={{width:'100%',height:'30%',resizeMode:'contain'}} source={{uri:Strings.imageUrl+ currentItem.image1}}/>
    <CustomText style={[{color:'white',lineHeight:24}]}>{currentItem.body}</CustomText>
    <Video source={{uri:currentItem.videoLink}}   // Can be a URL or a local file.
    controls={true}                              // Store reference
    onBuffer={this.onBuffer}                // Callback when remote video is buffering
    onError={this.videoError}               // Callback when video cannot be loaded
    paused={true}
    style={{width:'100%',height:screenHeight/4,}} />
    <View style={{flexDirection:'row-reverse'}}>
      <Icon />
    </View>
    <View style={{flexDirection:'row-reverse'}}>
      <CustomText style={CustomStyles.whiteTxt}>website: </CustomText>
      <CustomText style={{color:Colors.yellow,marginRight: 3}}>{currentItem.website}</CustomText>
    </View>
    <View style={{flexDirection:'row-reverse'}}>
    <CustomText style={CustomStyles.whiteTxt}>Address: </CustomText>
      <CustomText style={{color:Colors.yellow,marginRight: 3,}}>{currentItem.address}</CustomText>
    </View>
    <View style={{flexDirection:'row-reverse'}}>
    <CustomText style={[CustomStyles.whiteTxt,]}>Calls: </CustomText>
    <FlatList
    data={callsData}
    contentContainerStyle={{alignItems:'flex-end',marginRight:4}}
    keyExtractor={(index)=>index}
    renderItem={({item,index})=>
      <TouchableOpacity onPress={()=>this.renderCall(index)}>
      <CustomText style={{color:Colors.yellow}}>{item}</CustomText></TouchableOpacity>}
    />
    <View style={{flex:1}}/>
    </View>
    </View>

    :
    <ActivityIndicator/>}</View>
  </ScrollView>
  </SafeAreaView>
);
 }

编辑：这是 CustomStyles.js，颜色文件只包含颜色代码：

import { StyleSheet } from 'react-native';
import Colors from '../Values/Colors'
export default StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: 'black',
    },
    titleWhite:{
      color:'white',
      fontSize:18,margin:5
    },
  })

我也尝试使用 View 而不是 SafeAreaView 但问题没有解决。底部组件不显示。请帮帮我

标签： react-nativescrollview

解决方案

我认为问题出在 Image 组件高度属性中。我将它从“百分比”更改为这样的数字来自：

height:'30%'

至

height:.3*screenHeight

现在ScrollView工作正常

推荐阅读