124 lines
2.9 KiB
Markdown
124 lines
2.9 KiB
Markdown
# React Templates for Native Apps
|
|
|
|
In order to use React Templates for [React Native](https://facebook.github.io/react-native/) you should set the `native` option to true.
|
|
In native mode the default `modules` option is set to `commonjs` and the default `react-import-path` is set to `react-native`.
|
|
|
|
## Default properties templates configuration
|
|
|
|
In native mode we define a default properties template configuration in order to easily write native templates.
|
|
|
|
```javascript
|
|
{
|
|
ListView: {
|
|
Row: {prop: 'renderRow', arguments: ['rowData', 'sectionID', 'rowID', 'highlightRow']},
|
|
Footer: {prop: 'renderFooter', arguments: []},
|
|
Header: {prop: 'renderHeader', arguments: []},
|
|
ScrollComponent: {prop: 'renderScrollComponent', arguments: ['props']},
|
|
SectionHeader: {prop: 'renderSectionHeader', arguments: ['sectionData', 'sectionID']},
|
|
Separator: {prop: 'renderSeparator', arguments: ['sectionID', 'rowID', 'adjacentRowHighlighted']}
|
|
}
|
|
}
|
|
```
|
|
|
|
With this configuration you can write your ListView component as follow:
|
|
|
|
##### With default arguments:
|
|
|
|
```html
|
|
<View>
|
|
<ListView dataSource="{this.state.dataSource}">
|
|
<Row>
|
|
<Text>{rowData}</Text>
|
|
</Row>
|
|
</ListView>
|
|
</View>
|
|
```
|
|
|
|
###### Compiled:
|
|
```javascript
|
|
'use strict';
|
|
var React = require('react-native');
|
|
var _ = require('lodash');
|
|
function renderRow1(rowData) {
|
|
return React.createElement(React.Text, {}, rowData);
|
|
}
|
|
module.exports = function () {
|
|
return React.createElement(React.View, {}, React.createElement(React.ListView, {
|
|
'dataSource': this.state.dataSource,
|
|
'renderRow': renderRow1.bind(this)
|
|
}));
|
|
};
|
|
```
|
|
|
|
##### With custom arguments:
|
|
|
|
```html
|
|
<View>
|
|
<ListView dataSource="{this.state.dataSource}">
|
|
<Row arguments="item">
|
|
<Text>{item}</Text>
|
|
</Row>
|
|
</ListView>
|
|
</View>
|
|
```
|
|
|
|
###### Compiled:
|
|
```javascript
|
|
'use strict';
|
|
var React = require('react-native');
|
|
var _ = require('lodash');
|
|
function renderRow1(item) {
|
|
return React.createElement(React.Text, {}, item);
|
|
}
|
|
module.exports = function () {
|
|
return React.createElement(React.View, {}, React.createElement(React.ListView, {
|
|
'dataSource': this.state.dataSource,
|
|
'renderRow': renderRow1.bind(this)
|
|
}));
|
|
};
|
|
```
|
|
|
|
## Native style support
|
|
|
|
This feature is **Experimental** and is subject to change.
|
|
|
|
You can use rt to compile a style file similar to css:
|
|
|
|
```
|
|
.text {
|
|
background-color: #00346E;
|
|
padding: 3px;
|
|
}
|
|
|
|
.fonts {
|
|
background-color: #000099;
|
|
height: 30px;
|
|
}
|
|
```
|
|
|
|
will result in:
|
|
|
|
```javascript
|
|
'use strict';
|
|
var style = {
|
|
"text": {
|
|
"backgroundColor": "#00346E",
|
|
"padding": 3
|
|
},
|
|
"fonts": {
|
|
"backgroundColor": "#000099",
|
|
"height": 30
|
|
}
|
|
};
|
|
module.exports = style;
|
|
```
|
|
|
|
Which later you can import in your react native component:
|
|
|
|
```javascript
|
|
var styles = StyleSheet.create(require('./style.rts'))
|
|
```
|
|
|
|
|
|
|