react-native-turntable

1.0.1 • Public • Published

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

|basic_example_ios|basic_example_android|

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

 
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

Package Sidebar

Install

npm i react-native-turntable

Weekly Downloads

7

Version

1.0.1

License

MIT

Last publish

Collaborators

  • ltyx55mlb