React Native TurnTable

Easy-to-use roulette buttons for React Native App

Installation

npm i react-native-turntable --save

Usage

###Basic Example see full basic example

|||

|---------------|----------|

import {Turntable} from 'react-native-turntable'

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Turntable
          radius={200}
          distance={75}
          enableUserRotate
          turntableRotate={30}
          handlerOfRotate={()=>alert('触发')}
          customStyle={{ backgroundColor: '#E14C46' }}
        >
          <TouchableOpacity>
            <Text>1</Text>
          </TouchableOpacity>
          <TouchableOpacity>
            <Text>2</Text>
          </TouchableOpacity>
          <TouchableOpacity>
            <Text>3</Text>
          </TouchableOpacity>
          <TouchableOpacity>
            <Text>4</Text>
          </TouchableOpacity>
          <TouchableOpacity>
            <Text>5</Text>
          </TouchableOpacity>
          <TouchableOpacity>
            <Text>6</Text>
          </TouchableOpacity>
        </Turntable>
      </View>
    );
  }
}

Configuration

| Property | Type | Default | Description | |---------------|----------|-------------|----------------------------------------------------------------| | radius | number | 300 | radius of the turntable | | distance | number |100 | The distance from the center of each button | | turntableRotate | number | 0 |turntable button offset| | enableUserRotate | bool | false |Whether to open the disc rotation | | children | array | null | children | | handlerOfRotate | func | null | Function Callback triggered when the disc is rotated | | customStyle | any | null | turntable style |