尔

第1版 🚀

我们终于公布了 version 1 可弹出库

• 更好的动画 pressIn 财务报告和审定财务报表 pressOut 弹出qq
• 超过90k下载和战斗测试 QQ

安装

添加依赖 :

npm i @freakycoder/react-native-bounceable

使用量

导入

import RNBounceable from "@freakycoder/react-native-bounceable";

基本用途

你可以放进去 任何儿童部分 内部 可弹出 组件,它会让它在被按下时反弹

<RNBounceable onPress={() => {}}>
  <View style={styles.bounceButtonStyle}>
    <Text style={styles.bounceButtonTextStyle}>Bounce</Text>
  </View>
</RNBounceable>

基本实例

(1) 简单按钮

<RNBounceable
  onPress={() => console.log('Pressed!')}
  bounceEffectIn={0.92}
  bounceEffectOut={1}
  bounceVelocityIn={0.2}
  bounceVelocityOut={0.45}
  bouncinessIn={6}
  bouncinessOut={0}
  style={{
    backgroundColor: '#111827', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 12,
  }}
>
  <Text style={{ color: '#fff', fontWeight: '600' }}>Tap me</Text>
</RNBounceable>

(2) 按下反馈(功能样式)

<RNBounceable
  bounceEffectIn={0.97}
  bounceEffectOut={1}
  bounceVelocityIn={0.15}
  bounceVelocityOut={0.4}
  bouncinessIn={0}
  bouncinessOut={0}
  style={(state) => [{
    paddingVertical: 12, paddingHorizontal: 16, borderRadius: 12,
    backgroundColor: state.pressed ? '#0ea5e9' : '#3b82f6',
  }]}
  onPress={() => {}}
>
  <Text style={{ color: '#fff', fontWeight: '600' }}>Pressed color</Text>
</RNBounceable>

3) 自定义回弹调谐

<RNBounceable
  bounceEffectIn={0.88}
  bounceEffectOut={1}
  bounceVelocityIn={0.35}
  bounceVelocityOut={0.7}
  bouncinessIn={16}
  bouncinessOut={6}
  style={{ backgroundColor: '#22c55e', padding: 12, borderRadius: 12 }}
>
  <Text style={{ color: '#fff', fontWeight: '700' }}>Custom spring</Text>
</RNBounceable>

4) 已禁用( 无反弹)

<RNBounceable disabled style={{
  backgroundColor: '#9ca3af', padding: 12, borderRadius: 12, opacity: 0.6,
}}>
  <Text style={{ color: '#fff' }}>Disabled</Text>
</RNBounceable>

5) 在PressIn / 在PressOut上发布

<RNBounceable
  bounceEffectIn={0.95}
  bounceEffectOut={1}
  bounceVelocityIn={0.25}
  bounceVelocityOut={0.5}
  bouncinessIn={10}
  bouncinessOut={0}
  onPressIn={() => console.log('press in')}
  onPressOut={() => console.log('press out')}
  style={{ backgroundColor: '#111827', padding: 12, borderRadius: 12 }}
>
  <Text style={{ color: '#fff' }}>Press events</Text>
</RNBounceable>

6) 长期新闻

<RNBounceable
  bounceEffectIn={0.85}
  bounceEffectOut={1}
  bounceVelocityIn={0.4}
  bounceVelocityOut={0.65}
  bouncinessIn={14}
  bouncinessOut={4}
  onLongPress={() => console.log('long press')}
  delayLongPress={300}
  style={{ backgroundColor: '#111827', padding: 12, borderRadius: 12 }}
>
  <Text style={{ color: '#fff' }}>Hold me</Text>
</RNBounceable>

7) 图标/ 儿童形象

<RNBounceable
  bounceEffectIn={0.9}
  bounceEffectOut={1}
  bounceVelocityIn={0.5}
  bounceVelocityOut={0.6}
  bouncinessIn={18}
  bouncinessOut={6}
  onPress={() => {}}
  style={{ height: 44, width: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}
>
  <Text style={{ fontSize: 20 }}>❤️</Text>
</RNBounceable>

配置 - 道具

所有反应原生 Pressable 支持并转发道具(包括: onPressIn, (中文(简体) ), onPressOut, (中文(简体) ), disabled,以及 ref) (中文(简体) ). 弹出效果在 disabled 这是真的.

未来计划

• 自由主义
• 更自定义的动画道具
• 写一篇关于介质上的 lib 的文章

作者

怪人编剧, 库拉约贡@gmail.com

许可证

根据麻省理工学院的许可,可以使用React Independent Bounceable。 更多信息见LICENSE文件.