weex-nuke/docs/radio/demo/renderItem.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Radio Group 模式 Demo

- order : 1
- title_en: Radio.Group usage

---

```js
/** @jsx createElement */
import { View, Text, Radio, Button, Touchable, Page } from 'weex-nuke';

<NukePlayGround>
  <Radio.Group
    groupItemStyle={someStyle}
    value={this.state.value} // apple
    onChange={someFunc}
    renderItem={(option)=>{<Touchable><Text>{options.label}</Text><Radio value={options.value} /></Touchable>}}
    type="dot"
    dataSource={[{ value: 'apple', label: 'Apple' },{ value: 'pear', label: 'Pear' }...]}
  />
</NukePlayGround>
```

---

```js

import { createElement, Component, render } from 'rax';
const dataSource = [
  { value: 'apple', label: 'Apple' },
  { value: 'pear', label: 'Pear' },
  { value: 'orange', label: 'Orange' }
];

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      selected: 'apple'
    };
  }

  groupChange = (value) => {
    this.setState({
      selected: value
    });
    console.log('--->', value);
  };
  renderItem = (options) => {
    return (
      <Touchable style={styles.touchable}>
        <Text style={styles.text}>{options.label}</Text>
        <Radio value={options.value} type="dot" />
      </Touchable>
    );
  };
  render() {
    return (
      <Page title="Radio Group">
        <Page.Intro main="Simple" />
        <Radio.Group
          style={styles.groupWrap}
          touchStyle={{ width: 80, height: 80 }}
          groupItemStyle={styles.groupItem}
          value={this.state.selected}
          onChange={this.groupChange}
          size="small"
          type="list"
          dataSource={dataSource}
        />
        <Page.Intro main="Custom render item" />
        <Radio.Group
          style={styles.groupWrap}
          touchStyle={{ width: 80, height: 80 }}
          groupItemStyle={styles.groupItem}
          value={this.state.selected}
          onChange={this.groupChange}
          renderItem={this.renderItem}
          size="small"
          dataSource={dataSource}
        />
      </Page>
    );
  }
};
const styles = {
  groupWrap: {
    backgroundColor: '#ffffff',
    flexDirection: 'column',
    justifyContent: 'center'
  },
  touchable: {
    width: 750,
    height: 80,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomWidth: 2,
    borderBottomColor: '#F7F8FA',
    borderBottomStyle: 'solid',
    paddingLeft: 20,
    backgroundColor: '#ffffff'
  },
  text: {
    color: '#424242'
  },
  groupItem: {
    borderBottomColor: '#F7F8FA',
    borderBottomWidth: 2,
    borderBottomStyle: 'solid'
  }
};
render(<App />);
```