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>

猜你喜欢

转载自www.cnblogs.com/yazhng/p/10563316.html