Add SegmentedControlIOS

Summary:
Fixes #534:

![screen shot 2015-03-31 at 7 52 10 pm](https://cloud.githubusercontent.com/assets/153704/6934038/742ddd34-d7e3-11e4-8f55-3eb7d9d3f1cd.png)

```jsx
<SegmentedControlIOS
  tintColor="#ff0000"
  values={['One', 'Two', 'Three', 'Four']}
  selectedtIndex={0}
  momentary={false}
  enabled={true}
  onValueChange={ (value) => console.log(value) } />
```

This only supports string-based segments, not images. Also doesn't support full customization (no separator images etc); I figure this is a good MVP to lock-down a basic API

I also included a snapshot test case, but the images keep coming out funky. When I look at the sim, I see that the text labels show up for the selected segment, but the snapshot keeps coming out with no text on those segments. I tried forcing a delay, but same result. Is that explainable?

Obviously happy to change anything about the API, code-style nitpicks, etc
Closes https://github.com/facebook/react-native/pull/564
Github Author: Clay Allsopp <clay.allsopp@gmail.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.

Examples/UIExplorer/SegmentedControlIOSExample.js

@@ -0,0 +1,169 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  SegmentedControlIOS,
+  Text,
+  View,
+  StyleSheet
+} = React;
+
+var BasicSegmentedControlExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <View style={{marginBottom: 10}}>
+          <SegmentedControlIOS values={['One', 'Two']} />
+        </View>
+        <View>
+          <SegmentedControlIOS values={['One', 'Two', 'Three', 'Four', 'Five']} />
+        </View>
+      </View>
+    );
+  }
+});
+
+var PreSelectedSegmentedControlExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <View>
+          <SegmentedControlIOS values={['One', 'Two']} selectedIndex={0} />
+        </View>
+      </View>
+    );
+  }
+});
+
+var MomentarySegmentedControlExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <View>
+          <SegmentedControlIOS values={['One', 'Two']} momentary={true} />
+        </View>
+      </View>
+    );
+  }
+});
+
+var DisabledSegmentedControlExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <View>
+          <SegmentedControlIOS enabled={false} values={['One', 'Two']} selectedIndex={1} />
+        </View>
+      </View>
+    );
+  },
+});
+
+var ColorSegmentedControlExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <View style={{marginBottom: 10}}>
+          <SegmentedControlIOS tintColor="#ff0000" values={['One', 'Two', 'Three', 'Four']} selectedIndex={0} />
+        </View>
+        <View>
+          <SegmentedControlIOS tintColor="#00ff00" values={['One', 'Two', 'Three']} selectedIndex={1} />
+        </View>
+      </View>
+    );
+  },
+});
+
+var EventSegmentedControlExample = React.createClass({
+  getInitialState() {
+    return {
+      values: ['One', 'Two', 'Three'],
+      value: 'Not selected',
+      selectedIndex: undefined
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <Text style={styles.text} >
+          Value: {this.state.value}
+        </Text>
+        <Text style={styles.text} >
+          Index: {this.state.selectedIndex}
+        </Text>
+        <SegmentedControlIOS
+          values={this.state.values}
+          selectedIndex={this.state.selectedIndex}
+          onChange={this._onChange}
+          onValueChange={this._onValueChange} />
+      </View>
+    );
+  },
+
+  _onChange(event) {
+    this.setState({
+      selectedIndex: event.nativeEvent.selectedIndex,
+    });
+  },
+
+  _onValueChange(value) {
+    this.setState({
+      value: value,
+    });
+  }
+});
+
+var styles = StyleSheet.create({
+  text: {
+    fontSize: 14,
+    textAlign: 'center',
+    fontWeight: '500',
+    margin: 10,
+  },
+});
+
+exports.title = '<SegmentedControlIOS>';
+exports.displayName = 'SegmentedControlExample';
+exports.description = 'Native segmented control';
+exports.examples = [
+  {
+    title: 'Segmented controls can have values',
+    render(): ReactElement { return <BasicSegmentedControlExample />; }
+  },
+  {
+    title: 'Segmented controls can have a pre-selected value',
+    render(): ReactElement { return <PreSelectedSegmentedControlExample />; }
+  },
+  {
+    title: 'Segmented controls can be momentary',
+    render(): ReactElement { return <MomentarySegmentedControlExample />; }
+  },
+  {
+    title: 'Segmented controls can be disabled',
+    render(): ReactElement { return <DisabledSegmentedControlExample />; }
+  },
+  {
+    title: 'Custom colors can be provided',
+    render(): ReactElement { return <ColorSegmentedControlExample />; }
+  },
+  {
+    title: 'Change events can be detected',
+    render(): ReactElement { return <EventSegmentedControlExample />; }
+  }
+];