react native react-native-parallax-scroll-view的api

<ParallaxScrollView
    backgroundColor="transparent"
    contentBackgroundColor="transparent"
    headerBackgroundColor="#333"
    stickyHeaderHeight={40}
    parallaxHeaderHeight={250}
    backgroundSpeed={10}
    //设置头部背景图片
    renderBackground={() => (
        <View key="background">
            <Image source={require('../../assets/home/de.png')}
                   imageStyle={{resizeMode: Image.resizeMode.stretch}}
                   style={{
                       width: width,
                       height: 250,
                   }}>
            </Image>
            <View style={{ position: 'absolute', top: 0, width: window.width, backgroundColor: 'rgba(0,0,0,.4)', height: 250 }}/>
        </View>
    )
    }
    //自定义头部内容
    renderForeground={() => (
        <View style={{
            width: width,
            height: 250,
            justifyContent: 'center'
            ,marginTop:30
        }}>
            <View style={{flex:1,alignItems:'center'}}>
                <Text
                    style={{color:'white',fontSize:28,marginTop:50}}>BTC</Text>
            </View>
            <View style={{flexDirection:'row',flex:1}}>
                <View style={{flex:1}}>
                    <Text style={{paddingVertical: 5 ,textAlign:'center',color:'white'}}> 93,943.44</Text>
                    <Text style={{paddingVertical: 5 ,textAlign:'center',color:'white'}}>总资产</Text>
                </View>
                <View style={{flex:1}}>
                    <Text style={{paddingVertical: 5 ,textAlign:'center',color:'white'}}>93,943.44</Text>
                    <Text style={{paddingVertical: 5 ,textAlign:'center',color:'white'}}> 可用资产</Text>
                </View>
                <View style={{flex:1}}>
                    <Text style={{paddingVertical: 5 ,textAlign:'center',color:'white'}}> 93,943.44 </Text>
                    <Text style={{paddingVertical: 5 ,textAlign:'center',color:'white'}}> 冻结资产</Text>
                </View>
            </View>
        </View>
      )
    }
    //导航栏标题
    renderStickyHeader={() => (
        <PageHeader isHome={true} leftButtonPress={null} rightText={null} rightIcon={null} isShowRight={true} leftIcon={null} title="英大金融展业平台" />
    )
    }
    //固定的导航栏样式
    renderFixedHeader ={ () => (
        <PageHeader isHome={true} leftButtonPress={null} rightText={null} rightIcon={null} isShowRight={true} leftIcon={null} title="英大金融展业平台" />
    )
    }
>

  <View style={styles.bannerBox}>
      <Swiper
          style={styles.wrapper}
          height={width * 35 / 75}
          autoplayTimeout={2.5}
          // showButtons —— 是否显示左右翻页按钮
          showsButtons={false}
          // autoPlay —— 是否自动播放
          autoplay={true}
          // paginationStyle —— 包含小点点的容器的样式，这里用来调整位置
          paginationStyle={styles.paginationStyle}
          // dotStyle —— 小点点的样式
          dotStyle={styles.dotStyle}
          // activeDotStyle —— 当前被激活的小点点的样式
          activeDotStyle={styles.activeDotStyle}
      >
          <Image source={require('../../assets/home/banner.jpg')} style={styles.bannerImg}/>

      </Swiper>
  </View>
  <View style={styles.entry}>
      <Text style={styles.title}>展业入口</Text>
      <View style={styles.entryBox}>
          <View style={styles.logoBox}>
              <Image source={require('../../assets/home/logo.png')} style={styles.logoImg}/>
              <Text style={styles.logoName}>英大人寿</Text>
          </View>
          <Text style={styles.desc}>英大人寿移动展业平台</Text>
          <Image source={require('../../assets/home/arrow.png')} style={styles.arrow}/>
      </View>

  </View>
  <View style={styles.news}>
      <Text style={styles.title}>行业动态</Text>
  </View>
  <View style={styles.newsBox}>
      <FlatList
          data={this.state.data}
          renderItem={this.renderNews}
          style={styles.list}
          keyExtractor={item => item.id}
      />
  </View>
</ParallaxScrollView>

 

转载于:https://www.cnblogs.com/yazhng/p/10563316.html