weex-rx-components v0.0.1

Rx Universal Base Components

Text

<Text>Hello world</Text>

Image

Unlike with image in browser, you will need to manually specify the dimensions of your image. If you don't give a size to an image, it is going to render a 0x0 element.

// Render a 0x0 element
<Image
  source={{
    uri: '//img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png'
  }} />

// Render a 292x116 element
<Image
  source={{
    uri: '//img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png'
  }}
  style={{
    width: 292,
    height: 116,
  }}
/>

// Render a resizeMode element (cover/contain/stretch)
// resize the image when the frame doesn't match the raw image dimensions
<Image
  resizeMode='contain'
  source={{
    uri: '//img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png'
  }}
  style={{
    width: 292,
    height: 116,
  }}
/>

TextInput

<TextInput />

View

<View>
  <Text>Hi<Text>
</View>

ScrollView

<ScrollView horizontal={true}>
<View>
  <Text>Contents<Text>
</View>
</ScrollView>

Link

<Link href="//path/to"></Link>

Button

<Button onPress={()=>{}}>Click Me</Button>

TouchableHighlight

<TouchableHighlight onPress={()=>{}}>Click Me</TouchableHighlight>

Switch

<Switch onChange={()=>{}} />