Giter Club home page Giter Club logo

react-native-linear-animated-gradient-transition's Introduction

react-native-linear-animated-gradient-transition

react-native-linear-animated-gradient-tra

Installation

npm install react-native-linear-animated-gradient-transition

Usage

import { StyleSheet, View, Button } from 'react-native';
import LinearAnimatedGradientTransition from 'react-native-linear-animated-gradient-transition';

export default function App() {
  const [clicked, setClicked] = React.useState<boolean>();
  return (
    <View style={styles.container}>
      <LinearAnimatedGradientTransition
        style={styles.gradient}
        colors={clicked ? ['#F37144', '#F0A148'] : ['#2b32b2', '#1488cc']}
      />
      <Button title="Click" onPress={() => setClicked(!clicked)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  gradient: {
    width: 200,
    height: 200,
    margin: 20,
  },
});

License

MIT

react-native-linear-animated-gradient-transition's People

Contributors

superchenwb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

react-native-linear-animated-gradient-transition's Issues

在rn0.62.2版本安卓上面用这个组件报错

报红字typeError:Cannot assign to read only property 'animation' of object '#',把新增的useNativeDriver: true,和useNativeDriver: animation.useNativeDriver删除就能用,但是报黄字没有使用useNativeDriver

用您这个插件ios报错了

报错内容如下:
Exception thrown while executing UI block: *** -[__NSArrayM objectAtIndex:]: index 2 beyond bounds [0 .. 1]

__44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke
RCTUIManager.m:1183
__44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke.489
__RCTExecuteOnMainQueue_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start
0x0
用官方的那个就不会报这个错
代码如下:
const connector = connect(({ home }: rootState) => {
return {
...home,
colors:
home.banners && home.banners.length > 0
? home.banners[home.activeCarouselIndex].colors
: undefined,
};
});
//首页顶部标题栏组件
type modelState = ConnectedProps;
type IProps = MaterialTopTabBarProps & modelState;

class index extends Component {
get linearGradient() {
const { colors = [] } = this.props;
console.log(colors, "sss");

return <LinearGradient colors={colors} style={styles.gradient} />;

}
render() {
const { props } = this;
return (

{this.linearGradient}

<MaterialTopTabBar style={styles.tabBar} {...props} />

分类




搜索关键词


历史记录



);
}
}
export default connector(index);

const styles = StyleSheet.create({
container: {
paddingTop: getStatusBarHeight(),
backgroundColor: "#fff",
},
tabBar: {
elevation: 0, //清除安卓标题栏的投影
flex: 1,
overflow: "hidden", //ios 不加此属性 会出现溢出的边框
backgroundColor: "transparent",
},
tabBarTop: {
flexDirection: "row",
alignItems: "center",
},
categoryBtn: {
paddingHorizontal: 10,
borderLeftColor: "#ccc",
borderLeftWidth: StyleSheet.hairlineWidth,
},
tabBarBottom: {
flexDirection: "row",
alignItems: "center",
paddingHorizontal: 15,
paddingVertical: 7,
},
searchBtn: {
flex: 1,
paddingVertical: 10,
backgroundColor: "rgba(0,0,0,0.1)",
borderRadius: 15,
paddingLeft: 15,
},
historyBtn: {
marginLeft: 24,
},
gradient: {
height: 260,
...StyleSheet.absoluteFillObject,
},
});

Getting TypeError: Cannot assign to read only property 'animation' of object '#<Object>' when running jest test

TypeError: Cannot assign to read only property 'animation' of object '#<Object>'

      at getDerivedStateFromProps (node_modules/react-native-linear-animated-gradient-transition/lib/commonjs/index.tsx:48:8)
      at applyDerivedStateFromProps (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3857:22)
      at mountClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4266:5)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8310:5)
      at beginWork$1 (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10076:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14694:12)
      at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14667:22)
      at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14366:11)
      at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2063:24
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:818:12)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.