x-ui

<ActionSheet
  ref = {o => this.ActionSheet = o}
  options = {[
    'option1',
    <Text style = {{color: '#108EE9', fontSize: 18}} >{'option2'}</Text>,
    <Text style = {{color: '#ff4f4f', fontSize: 20}} >{'删除'}</Text>
  ]}
  title = {'自定义组件'}
/>
<Button title = {'open'} onPress = {() => this.ActionSheet.show()} />

const boxContainer = <div className = {'badge-box'} ></div>
<Badge num = {1} style = {{marginRight: '0.8rem'}} >{boxContainer}</Badge>
<Badge text = {'券'} defaultBackColor = {'#f19736'} />

const containerBox = {
  width: 30,
  height: 30,
  backgroundColor: 'gray'
}
<Badge num = {1} style = {{marginRight: 30}} >
  <View style = {containerBox} ></View>
</Badge>

const style = {width: utils.window.width, height: 200}
<Carousel 
  carouselStyle = {{marginBottom: 20}} 
  width = {utils.window.width} 
  height = {200} 
  autoPlay = {false} 
  index = {2} 
  onIndexChanged = {(index) => console.log(index)}
>
  <Image source = {require('../../image/scenery.jpg')} style = {style } />
  <Image source = {require('../../image/carousel1.jpg')} style = {style} />
  <Image source = {require('../../image/swiper-bk.jpg')} style = {style} />
  <Image source = {require('../../image/carousel2.jpg')} style = {style} />
</Carousel>

<Collapse
  accordion = {true}
  onChange = {(activeKey) => activeKey && alert(activeKey)}
  style = {{marginBottom: '0.4rem'}}
  activeKey = {'panel2'}
>
  <Collapse.Panel title = {'标题1'} panelKey = {'panel1'} >
    <p className = {'panel-margin'} >这是一个含有回调函数的手风琴模式的面板子组件</p>
  </Collapse.Panel>
  <Collapse.Panel title = {'标题2'} panelKey = {'panel2'} >
    <p className = {'panel-margin'} >这是一个含有回调函数的手风琴模式的面板子组件</p>
  </Collapse.Panel>
  <Collapse.Panel title = {'标题3'} panelKey = {'panel3'} >
    <p className = {'panel-margin'} >这是一个含有回调函数的手风琴模式的面板子组件</p>
  </Collapse.Panel>
</Collapse>

const drawerView = (
  <div>
    <List title = {'前往商城'} showLine />
    <List title = {'个人中心'} showLine />
    <List title = {'设置'} showLine />
    <p className = {'margin-15 header-text'}>I'm in the Drawer!</p>
  </div>
)
<Button 
  onPress = {() => this.drawer.openDrawer()} 
>打开右侧抽屉</Button>
<DrawerLayout 
  drawerPosition = {DRAWER_POSITION.RIGHT} 
  renderNavigationView = {() => drawerView} 
  ref = {drawer => this.drawer = drawer} 
/>

const navigationView = (
  <View style={{flex: 1, backgroundColor: '#fff'}} >
    <List title = {'前往商城'} />
    <List title = {'个人中心'} />
    <List title = {'设置'} />
    <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
  </View>
)
<DrawerLayout
  drawerWidth = {200}
  renderNavigationView = {() => navigationView}
  onDrawerOpen = {() => console.log('opend')}
  onDrawerClose = {() => console.log('closed')}
  onDrawerSlide = {() => console.log('sliding')}
  ref = {drawer => this.Drawer = drawer}
>
  <View style = {styles.container} >
    <Text style = {styles.introduction} >一个纯JavaScript实现的抽屉组件，具有和React Native的DrawerLayoutAndroid相同的api。我们舍弃了使用率较低的onDrawerStateChanged，并将所有枚举类型单独提取出来。</Text>
    <Button buttonColor = {'#108EE9'} onPress = {() => this.Drawer.openDrawer()} >打开抽屉</Button>
  </View>
</DrawerLayout>