Фон изображения в режиме прокрутки не работает React Native

Question

Я новичок в реагировании на родной язык, и мне нужно спроектировать экран, и когда список становится длиннее, я понял, что мое представление прокрутки здесь не работает, ниже моего кода, пожалуйста, поделитесь предложением ... Спасибо!

<View style={{flex:1}}>
    <ActionBar
      containerStyle={{height:60,alignItems: 'center'}}
      backgroundColor={'#fff'}
      title={'Select Categories'}
      titleStyle={styles.pageTitle}
      onLeftPress={() => goBack()}
      leftIconContainerStyle={{marginTop:22}}
      leftIconName={'back'}
      leftIconImageStyle={{backgroundColor:'#333',height:18,width:18}}
    />
    <Image source={require('../images/bg-login.jpg')}
     style={{position:'absolute',left:0,right:0,top:0,bottom:0}} />
     <ScrollView style={{backgroundColor:'#00000000',position:'absolute',left:0,right:0,top:0,bottom:0}} >
        {views}
    </ScrollView>
    <View style={styles.footerSec}>
        <TouchableOpacity style={styles.nextBtn}
          onPress={()=> {this.props.navigation.navigate('Tutorials',{tutId:this.state.selectedCats})}}>
          <Text style={[styles.btnText, styles.priceText]}>Next</Text>
        </TouchableOpacity>
    </View>
  </View>

Вот мой список кодов:

<TouchableOpacity key={itemData[j]._id}
                onPress = {() => {
                  activeItem ? this.removeCat(itemData[j]._id) : this.insertCat(itemData[j]._id)
                }}>

                    <View style={{position:'relative'}}>
                      <LinearGradient colors={activeItem ? ['#cb5fb1', '#f874d8', '#f98bde'] :['#ffb6cf','#ffb6cf','#ffb6cf'] } style={{
                        position: 'absolute',
                        alignItems: 'center',
                        justifyContent:'center',
                        backgroundColor: '#f673d7',
                        width:  armSize,
                        height: armSize,
                        borderRadius: (armSize) / 2,
                        top: topp,
                        left: leftp,
                      }}>
                      <Text style={{
                            color: '#fff',
                            alignSelf:'center',
                            fontSize: RandomNumber,
                            fontWeight: '600',
                            }}>
                        {itemData[j].name}
                      </Text>
                      </LinearGradient>
                    </View>


                </TouchableOpacity>

Я спроектировал ниже экрана, но представление прокрутки отскакивает и поднимается на ту же позицию ... Я думаю, это из-за стиля ребенка position , ноэто требуется для круга в ряду.Я не могу прокрутить ниже кругов, это проблема.

Answer 1

Для проблем с прокруткой я использовал приведенный ниже код, и он везде работает нормально

<ScrollView contentContainerStyle={{ paddingBottom: 120 }}>
---code---

</ScrollView>

Answer 2

Вы можете использовать обычное изображение, чтобы поместить фоновое изображение, используя position = 'absolute' и установив непрозрачность цвета фона ScrollView на # 00000000 , что означает, что оно будет прозрачным

Пример

<Image
 source={require('../images/bg-login.jpg')}
 style={{position:'absolute',
 left:0, 
 right:0, 
 top:0,
 bottom:0}} />
 <ScrollView 
  style={{backgroundColor:'#00000000',
  position:'absolute',
  left:0,
  right:0,
  top:0,
  bottom:0}} >
    <View>
        <Text>Some content</Text>
    </View>
</ScrollView>