react-native-smart-sudoku-grid
A smart sudoku grid layout for react-native apps. Written in JS for cross-platform support. It works on iOS and Android.
This component is compatible with React Native 0.25 and newer.
Preview
Installation
npm install react-native-smart-sudoku-grid --save
Full Demo
Usage
Install the SudokuGrid from npm with npm install react-native-smart-sudoku-grid --save
.
Then, require it from your app's JavaScript files with import SudokuGrid from 'react-native-smart-sudoku-grid'
.
const dataList = icon: image_cash title: 'cash' icon: image_credit title: 'credit' icon: image_transfer title: 'transfer' icon: image_loan title: 'loan' icon: image_charge title: 'charge' icon: image_payment title: 'payment' icon: image_shopping title: 'shopping' icon: image_service title: 'service' icon: image_donate title: 'donate' const columnCount = 3 { return <ScrollView style=marginTop: 44 + 20 backgroundColor: '#fff' > <View style=height: 30 paddingLeft: 10 backgroundColor: '#E1E5E8' justifyContent: 'center' > <Text>Services: </Text> </View> <SudokuGrid containerStyle= backgroundColor: '#fff' columnCount=columnCount dataSource=dataList renderCell=this_renderGridCell /> </ScrollView> } { return <TouchableHighlight underlayColor='#eee' onPress= this_onPressCell > <View style= overflow: 'hidden' justifyContent: 'center' alignItems: 'center' height: 100 borderBottomWidth: StyleSheethairlineWidth borderColor: '#eee' borderRightWidth: index + 1 % columnCount ? StyleSheethairlineWidth: 0 > <Image source=dataicon style=width: 30 height: 30 marginHorizontal: 10 marginBottom: 10/> <Text>datatitle</Text> index == 6 ? <CornerLabel cornerRadius=54 style=backgroundColor: 'red' height: 24 textStyle=color: '#fff' > 30% off </CornerLabel> : index == 3 ? <CornerLabel alignment='right' cornerRadius=54 style=backgroundColor: 'red' height: 24 textStyle=color: '#fff' fontSize: 12> 7折优惠 </CornerLabel> : null </View> </TouchableHighlight> } { Alert }
Props
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
rowWidth | number | Yes | deviceWidth | determines the width of a row. |
columnCount | number | No | determines how many columns a row contains. | |
dataSource | array | No | determines the datasource of grid | |
renderCell | func | No | A function that returns the grid cell component. | |
style | style | Yes | see react-native documents |