react-native-slot-machine

Mesin slot teks untuk react-native adalah komponen Slot Machine yang mudah dan sepenuhnya dapat disesuaikan untuk aplikasi React Native.

Versi 0.4.0, Lisensi MIT

Penggunaan

<View> <SlotMachine text={1234} /> <SlotMachine text="hello" range="abcdefghijklmnopqrstuvwxyz" /></View>

Props

Props berikut dapat digunakan untuk mengubah gaya dan/atau perilaku mesin slot:

• text - Teks atau angka yang akan ditampilkan.
• range - Rentang karakter yang digunakan untuk animasi.
• duration - Durasi animasi dalam milidetik.
• width - Lebar setiap kolom.
• renderContent - Fungsi untuk merender konten kustom.

Metode

spinTo(text)

Memutar mesin slot dari posisi saat ini ke posisi teks yang ditentukan.

Contoh Lanjutan

class App extends Reactponent { constructor(props) { super(props); this = {duration: 4000, slot1: 1234, slot2: 'hello', slot3: '2351'}; } componentDidMount() { setTimeout(() => thiste({duration: 1000, slot1: '4321', slot2: 'world', slot3: '1234'}), 5000); setTimeout(() => thiste({duration: 4000, slot1: '1234', slot2: 'hello', slot3: '2351'}), 7000); setTimeout(() => slot('prize'), 12000); } render() { const symbols = ['🍏', '🍎', '🍐', '🍊', '🍋', '🍌']; // tidak bisa menggunakan emoji di SlotMachine karena beberapa terdiri dari 2 karakter return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> <View style={{height: 200, justifyContent: 'space-between', alignItems: 'center'}}> <SlotMachine text={state1} duration={stateon} /> <SlotMachine text={state2} range="abcdefghijklmnopqrstuvwxyz" width={45} duration={stateon} ref="slot" /> <SlotMachine text={state3} range="012345" renderContent={c => <Text style={{fontSize: 25}}>{symbols[c]}</Text>} duration={stateon} /> </View> </View> ); }}

Kata kunci: react-native, react, native, slotmachine, slot-machine, react-native-component