智慧物流>> react-native-parallax-header>> 返回
项目作者： FabFit

项目描述 ：
Animated Parallax Headers for React Native
高级语言： TypeScript
项目地址: git://github.com/FabFit/react-native-parallax-header.git
创建时间： 2020-04-05T14:06:25Z
项目社区：https://github.com/FabFit/react-native-parallax-header
开源协议：MIT License
下载



React Native Parallax Header





Animated parallax headers for React Native as seen in our FabFit Studio App.

This component currently only supports iOS. It has not been tested in a production environment on Android.

Basic example (examples/src/screens/image) Overlay example (FabFit Studio iOS App)

Installation

  1. npm install @fabfit/react-native-parallax-header

or

  1. yard add @fabfit/react-native-parallax-header

Usage

  1. import ParallaxHeader from '@fabfit/react-native-parallax-header';
  3. const MyScreen = () => (
  4.   <ParallaxHeader
  5.     maxHeight={300}
  6.     minHeight={100}
  7.     heroImage={{ uri: 'https://source.unsplash.com/user/erondu/600x300' }}
  8.   >
  9.     <Text>All children will render below the parallax header</Text>
  10.   </ParallaxHeader>
  11. );

Props

Name Description Default
maxHeight (optional) Sets the maximum height of the header 550
minHeight (optional) Sets the minimum height of the header 170
children React children -
renderOverlay Renders an overlay over the parallax header, e.g text -
renderHeader -
heroImage React Native image props for display default image -

Examples

There are a number of examples that can be found in the /examples directory. If you’d like to run the examples you will need to:

  1. checkout this repository
  2. run yarn ; yarn bootstrap in the root
  3. run yarn example:ios which will run the example directory in a simulator

License

MIT © FabFit