kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-03-26 23:24:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Ben Alpert
2015-01-29 17:10:49 -08:00
commit a15603d8f1
382 changed files with 39183 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
Examples/UIExplorer/AppDelegate.h Normal file
View File

@@ -0,0 +1,10 @@
// Copyright 2004-present Facebook. All Rights Reserved.
#import <UIKit/UIKit.h>
@interface AppDelegate : UIResponder <UIApplicationDelegate>
@property (nonatomic, strong) UIWindow *window;
@end

44
Examples/UIExplorer/AppDelegate.m Normal file
View File

@@ -0,0 +1,44 @@
// Copyright 2004-present Facebook. All Rights Reserved.
#import "AppDelegate.h"
#import "RCTRootView.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
RCTRootView *rootView = [[RCTRootView alloc] init];
// Loading JavaScript code - uncomment the one you want.
// OPTION 1
// Load from development server. Start the server from the repository root:
//
// $ npm start
//
// To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
// iOS device are on the same Wi-Fi network.
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/UIExplorer/UIExplorerApp.includeRequire.runModule.bundle"];
// OPTION 2
// Load from pre-bundled file on disk. To re-generate the static bundle, run
//
// $ curl http://localhost:8081/Examples/UIExplorer/UIExplorerApp.includeRequire.runModule.bundle -o main.jsbundle
//
// and uncomment the next following line
// jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
rootView.scriptURL = jsCodeLocation;
rootView.moduleName = @"UIExplorerApp";
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [[UIViewController alloc] init];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
@end

41
Examples/UIExplorer/Base.lproj/LaunchScreen.xib Normal file
View File

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="6254" systemVersion="13F34" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6247"/>
<capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
</dependencies>
<objects>
<placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
<placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
<view contentMode="scaleToFill" id="iN0-l3-epB">
<rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text=" Copyright (c) 2015 Facebook. All rights reserved." textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
<rect key="frame" x="20" y="439" width="441" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="UIExplorer" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
<rect key="frame" x="20" y="140" width="441" height="43"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
<constraints>
<constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
<constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
<constraint firstAttribute="bottom" secondItem="8ie-xW-0ye" secondAttribute="bottom" constant="20" id="Kzo-t9-V3l"/>
<constraint firstItem="8ie-xW-0ye" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="MfP-vx-nX0"/>
<constraint firstAttribute="centerX" secondItem="8ie-xW-0ye" secondAttribute="centerX" id="ZEH-qu-HZ9"/>
<constraint firstItem="kId-c2-rCX" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="fvb-Df-36g"/>
</constraints>
<nil key="simulatedStatusBarMetrics"/>
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
<point key="canvasLocation" x="548" y="455"/>
</view>
</objects>
</document>

54
Examples/UIExplorer/ExpandingTextExample.js Normal file
View File

@@ -0,0 +1,54 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ExpandingTextExample
*/
'use strict';
var React = require('react-native');
var {
ExpandingText
} = React;
var LOREM = 'Lorem ipsum dolor sit amet, mea adipisci inimicus ex, paulo essent bonorum et ius, rebum deserunt mediocritatem ius ei.';
exports.title = '<ExpandingText>';
exports.description = 'Base component for rendering text that is truncated and can be expanded upon tap.';
exports.examples = [
{
title: 'Expanding text (truncLength=20)',
description: 'Setting the truncLength prop will cause the text to truncate to that character length',
render: function() {
return <ExpandingText truncLength={20} text={LOREM} />;
}
}, {
title: 'Expanding text (truncLength=80)',
description: 'The higher the truncLength the more characters that will be shown by default',
render: function() {
return <ExpandingText truncLength={80} text={LOREM + LOREM} />;
}
}, {
title: 'Expanding text with custom style',
description: 'You can style the text within the ExpandingText component',
render: function() {
return (
<ExpandingText
textStyle={{fontFamily: 'Verdana'}}
truncLength={80}
text={LOREM + LOREM}
/>
);
}
}, {
title: 'See More button with custom style' ,
description: 'You can also style just the See More button',
render: function() {
return (
<ExpandingText
seeMoreStyle={{color: 'red'}}
truncLength={80}
text={LOREM}
/>
);
}
}];

66
Examples/UIExplorer/ImageCapInsetsExample.js Normal file
View File

@@ -0,0 +1,66 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ImageCapInsetsExample
*/
'use strict';
var React = require('react-native');
var {
Image,
StyleSheet,
Text,
View,
ix,
} = React;
var ImageCapInsetsExample = React.createClass({
render: function() {
return (
<View>
<View style={styles.background}>
<Text>
capInsets: none
</Text>
<Image
source={ix('story-background')}
style={styles.storyBackground}
capInsets={{left: 0, right: 0, bottom: 0, top: 0}}
/>
</View>
<View style={[styles.background, {paddingTop: 10}]}>
<Text>
capInsets: 15
</Text>
<Image
source={ix('story-background')}
style={styles.storyBackground}
capInsets={{left: 15, right: 15, bottom: 15, top: 15}}
/>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
background: {
backgroundColor: '#F6F6F6',
justifyContent: 'center',
alignItems: 'center',
},
horizontal: {
flexDirection: 'row',
},
storyBackground: {
width: 250,
height: 150,
borderWidth: 1,
resizeMode: Image.resizeMode.stretch,
},
text: {
fontSize: 13.5,
}
});
module.exports = ImageCapInsetsExample;

305
Examples/UIExplorer/ImageExample.js Normal file
View File

@@ -0,0 +1,305 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ImageExample
*/
'use strict';
var React = require('react-native');
var {
Image,
StyleSheet,
Text,
View,
ix,
} = React;
var ImageCapInsetsExample = require('./ImageCapInsetsExample');
exports.framework = 'React';
exports.title = '<Image>';
exports.description = 'Base component for displaying different types of images.';
exports.examples = [
{
title: 'Plain Network Image',
description: 'If the `source` prop `uri` property is prefixed with ' +
'"http", then it will be downloaded from the network.',
render: function() {
return (
<Image
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
style={styles.base}
/>
);
},
},
{
title: 'Plain Static Image',
description: 'Static assets must be referenced with the `ix` wrapper and ' +
'located in the app bundle.',
render: function() {
return (
<View style={styles.horizontal}>
<Image source={ix('uie_thumb_normal')} style={styles.icon} />
<Image source={ix('uie_thumb_selected')} style={styles.icon} />
<Image source={ix('uie_comment_normal')} style={styles.icon} />
<Image source={ix('uie_comment_highlighted')} style={styles.icon} />
</View>
);
},
},
{
title: 'Border Color',
render: function() {
return (
<View style={styles.horizontal}>
<Image
source={smallImage}
style={[
styles.base,
styles.background,
{borderWidth: 3, borderColor: '#f099f0'}
]}
/>
</View>
);
},
},
{
title: 'Border Width',
render: function() {
return (
<View style={styles.horizontal}>
<Image
source={smallImage}
style={[
styles.base,
styles.background,
{borderWidth: 5, borderColor: '#f099f0'}
]}
/>
</View>
);
},
},
{
title: 'Border Radius',
render: function() {
return (
<View style={styles.horizontal}>
<Image
style={[styles.base, styles.background, {borderRadius: 5}]}
source={smallImage}
/>
<Image
style={[
styles.base,
styles.background,
styles.leftMargin,
{borderRadius: 19}
]}
source={smallImage}
/>
</View>
);
},
},
{
title: 'Background Color',
render: function() {
return (
<View style={styles.horizontal}>
<Image source={smallImage} style={styles.base} />
<Image
style={[
styles.base,
styles.leftMargin,
{backgroundColor: 'rgba(0, 0, 100, 0.25)'}
]}
source={smallImage}
/>
<Image
style={[styles.base, styles.leftMargin, {backgroundColor: 'red'}]}
source={smallImage}
/>
<Image
style={[styles.base, styles.leftMargin, {backgroundColor: 'black'}]}
source={smallImage}
/>
</View>
);
},
},
{
title: 'Opacity',
render: function() {
return (
<View style={styles.horizontal}>
<Image
style={[styles.base, {opacity: 1}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0.8}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0.6}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0.4}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0.2}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0}]}
source={fullImage}
/>
</View>
);
},
},
{
title: 'Nesting',
render: function() {
return (
<Image
style={{width: 60, height: 60, backgroundColor: 'transparent'}}
source={fullImage}>
<Text style={styles.nestedText}>
React
</Text>
</Image>
);
},
},
{
title: 'Tint Color',
description: 'The `tintColor` style prop changes all the non-alpha ' +
'pixels to the tint color.',
render: function() {
return (
<View style={styles.horizontal}>
<Image
source={ix('uie_thumb_normal')}
style={[styles.icon, {tintColor: 'blue' }]}
/>
<Image
source={ix('uie_thumb_normal')}
style={[styles.icon, styles.leftMargin, {tintColor: 'green' }]}
/>
<Image
source={ix('uie_thumb_normal')}
style={[styles.icon, styles.leftMargin, {tintColor: 'red' }]}
/>
<Image
source={ix('uie_thumb_normal')}
style={[styles.icon, styles.leftMargin, {tintColor: 'black' }]}
/>
</View>
);
},
},
{
title: 'Resize Mode',
description: 'The `resizeMode` style prop controls how the image is ' +
'rendered within the frame.',
render: function() {
return (
<View style={styles.horizontal}>
<View>
<Text style={[styles.resizeModeText]}>
Contain
</Text>
<Image
style={[
styles.resizeMode,
{resizeMode: Image.resizeMode.contain}
]}
source={fullImage}
/>
</View>
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Cover
</Text>
<Image
style={[
styles.resizeMode,
{resizeMode: Image.resizeMode.cover}
]}
source={fullImage}
/>
</View>
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Stretch
</Text>
<Image
style={[
styles.resizeMode,
{resizeMode: Image.resizeMode.stretch}
]}
source={fullImage}
/>
</View>
</View>
);
},
},
{
title: 'Cap Insets',
description:
'When the image is resized, the corners of the size specified ' +
'by capInsets will stay a fixed size, but the center content and ' +
'borders of the image will be stretched. This is useful for creating ' +
'resizable rounded buttons, shadows, and other resizable assets.',
render: function() {
return <ImageCapInsetsExample />;
},
},
];
var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};
var smallImage = {uri: 'http://facebook.github.io/react/img/logo_small.png'};
var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
leftMargin: {
marginLeft: 10,
},
background: {
backgroundColor: '#222222'
},
nestedText: {
marginLeft: 12,
marginTop: 20,
backgroundColor: 'transparent',
color: 'white'
},
resizeMode: {
width: 90,
height: 60,
borderWidth: 0.5,
borderColor: 'black'
},
resizeModeText: {
fontSize: 11,
marginBottom: 3,
},
icon: {
width: 15,
height: 15,
},
horizontal: {
flexDirection: 'row',
}
});

44
Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/Contents.json Normal file
View File

@@ -0,0 +1,44 @@
{
"images" : [
{
"size" : "29x29",
"idiom" : "iphone",
"filename" : "uie_icon@2x.png",
"scale" : "2x"
},
{
"size" : "29x29",
"idiom" : "iphone",
"filename" : "uie_icon@2x-1.png",
"scale" : "3x"
},
{
"size" : "40x40",
"idiom" : "iphone",
"filename" : "uie_icon@2x-2.png",
"scale" : "2x"
},
{
"size" : "40x40",
"idiom" : "iphone",
"filename" : "uie_icon@2x-3.png",
"scale" : "3x"
},
{
"size" : "60x60",
"idiom" : "iphone",
"filename" : "uie_icon@2x-5.png",
"scale" : "2x"
},
{
"size" : "60x60",
"idiom" : "iphone",
"filename" : "uie_icon@2x-4.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/uie_icon@2x-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/uie_icon@2x-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/uie_icon@2x-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/uie_icon@2x-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/uie_icon@2x-5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/uie_icon@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

22
Examples/UIExplorer/Images.xcassets/story-background.imageset/Contents.json vendored Normal file
View File

@@ -0,0 +1,22 @@
{
"images" : [
{
"idiom" : "universal",
"scale" : "1x",
"filename" : "story-background.png"
},
{
"idiom" : "universal",
"scale" : "2x",
"filename" : "story-background@2x.png"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
Examples/UIExplorer/Images.xcassets/story-background.imageset/story-background.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 336 B

BIN
Examples/UIExplorer/Images.xcassets/story-background.imageset/story-background@2x.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 657 B

21
Examples/UIExplorer/Images.xcassets/uie_comment_highlighted.imageset/Contents.json vendored Normal file
View File

@@ -0,0 +1,21 @@
{
"images" : [
{
"idiom" : "universal",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x",
"filename" : "uie_comment_highlighted@2x.png"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
Examples/UIExplorer/Images.xcassets/uie_comment_highlighted.imageset/uie_comment_highlighted@2x.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 403 B

21
Examples/UIExplorer/Images.xcassets/uie_comment_normal.imageset/Contents.json vendored Normal file
View File

@@ -0,0 +1,21 @@
{
"images" : [
{
"idiom" : "universal",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x",
"filename" : "uie_comment_normal@2x.png"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
Examples/UIExplorer/Images.xcassets/uie_comment_normal.imageset/uie_comment_normal@2x.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 420 B

21
Examples/UIExplorer/Images.xcassets/uie_thumb_normal.imageset/Contents.json vendored Normal file
View File

@@ -0,0 +1,21 @@
{
"images" : [
{
"idiom" : "universal",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x",
"filename" : "uie_thumb_normal@2x.png"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
Examples/UIExplorer/Images.xcassets/uie_thumb_normal.imageset/uie_thumb_normal@2x.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 850 B

21
Examples/UIExplorer/Images.xcassets/uie_thumb_selected.imageset/Contents.json vendored Normal file
View File

@@ -0,0 +1,21 @@
{
"images" : [
{
"idiom" : "universal",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x",
"filename" : "uie_thumb_selected@2x.png"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
Examples/UIExplorer/Images.xcassets/uie_thumb_selected.imageset/uie_thumb_selected@2x.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

38
Examples/UIExplorer/Info.plist Normal file
View File

@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>com.facebook.$(PRODUCT_NAME:rfc1034identifier)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
</dict>
</plist>

145
Examples/UIExplorer/LayoutExample.js Normal file
View File

@@ -0,0 +1,145 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule LayoutExample
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
var Circle = React.createClass({
render: function() {
var size = this.props.size || 20;
return (
<View
style={{
borderRadius: size / 2,
backgroundColor: '#527fe4',
width: size,
height: size,
margin: 1,
}}
/>
);
}
});
var CircleBlock = React.createClass({
render: function() {
var circleStyle = {
flexDirection: 'row',
backgroundColor: '#f6f7f8',
borderWidth: 0.5,
borderColor: '#d6d7da',
marginBottom: 2,
};
return (
<View style={[circleStyle, this.props.style]}>
{this.props.children}
</View>
);
}
});
var LayoutExample = React.createClass({
statics: {
title: 'Layout - Flexbox',
description: 'Examples of using the flexbox API to layout views.'
},
render: function() {
return (
<UIExplorerPage title={this.props.navigator ? null : 'Layout'}>
<UIExplorerBlock title="Flex Direction">
<Text>row</Text>
<CircleBlock style={{flexDirection: 'row'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>column</Text>
<CircleBlock style={{flexDirection: 'column'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<View style={[styles.overlay, {position: 'absolute', top: 15, left: 160}]}>
<Text>{'top: 15, left: 160'}</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Justify Content - Main Direction">
<Text>flex-start</Text>
<CircleBlock style={{justifyContent: 'flex-start'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>center</Text>
<CircleBlock style={{justifyContent: 'center'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>flex-end</Text>
<CircleBlock style={{justifyContent: 'flex-end'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>space-between</Text>
<CircleBlock style={{justifyContent: 'space-between'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>space-around</Text>
<CircleBlock style={{justifyContent: 'space-around'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
</UIExplorerBlock>
<UIExplorerBlock title="Align Items - Other Direction">
<Text>flex-start</Text>
<CircleBlock style={{alignItems: 'flex-start', height: 30}}>
<Circle size={15} /><Circle size={10} /><Circle size={20} />
<Circle size={17} /><Circle size={12} /><Circle size={15} />
<Circle size={10} /><Circle size={20} /><Circle size={17} />
<Circle size={12} /><Circle size={15} /><Circle size={10} />
<Circle size={20} /><Circle size={17} /><Circle size={12} />
<Circle size={15} /><Circle size={8} />
</CircleBlock>
<Text>center</Text>
<CircleBlock style={{alignItems: 'center', height: 30}}>
<Circle size={15} /><Circle size={10} /><Circle size={20} />
<Circle size={17} /><Circle size={12} /><Circle size={15} />
<Circle size={10} /><Circle size={20} /><Circle size={17} />
<Circle size={12} /><Circle size={15} /><Circle size={10} />
<Circle size={20} /><Circle size={17} /><Circle size={12} />
<Circle size={15} /><Circle size={8} />
</CircleBlock>
<Text>flex-end</Text>
<CircleBlock style={{alignItems: 'flex-end', height: 30}}>
<Circle size={15} /><Circle size={10} /><Circle size={20} />
<Circle size={17} /><Circle size={12} /><Circle size={15} />
<Circle size={10} /><Circle size={20} /><Circle size={17} />
<Circle size={12} /><Circle size={15} /><Circle size={10} />
<Circle size={20} /><Circle size={17} /><Circle size={12} />
<Circle size={15} /><Circle size={8} />
</CircleBlock>
</UIExplorerBlock>
<UIExplorerBlock title="Flex Wrap">
<CircleBlock style={{flexWrap: 'wrap'}}>
{'oooooooooooooooo'.split('').map(() => <Circle />)}
</CircleBlock>
</UIExplorerBlock>
</UIExplorerPage>
);
}
});
var styles = StyleSheet.create({
overlay: {
backgroundColor: '#aaccff',
borderRadius: 10,
borderWidth: 0.5,
opacity: 0.5,
padding: 5,
},
});
module.exports = LayoutExample;

121
Examples/UIExplorer/ListViewSimpleExample.js Normal file
View File

@@ -0,0 +1,121 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @provides ListViewSimpleExample
*/
'use strict';
var React = require('react-native');
var {
Image,
ListView,
ListViewDataSource,
TouchableHighlight,
StyleSheet,
Text,
View,
} = React;
var UIExplorerPage = require('./UIExplorerPage');
var ListViewSimpleExample = React.createClass({
statics: {
title: '<ListView> - Simple',
description: 'Performant, scrollable list of data.'
},
getInitialState: function() {
var ds = new ListViewDataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return {
dataSource: ds.cloneWithRows(this._genRows({})),
};
},
componentWillMount: function() {
this._pressData = {};
},
render: function() {
return (
<UIExplorerPage
title={this.props.navigator ? null : '<ListView> - Simple'}
noSpacer={true}
noScroll={true}>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
/>
</UIExplorerPage>
);
},
_renderRow: function(rowData, sectionID, rowID) {
var rowHash = Math.abs(hashCode(rowData));
var imgSource = {
uri: THUMB_URLS[rowHash % THUMB_URLS.length],
};
return (
<TouchableHighlight onPress={() => this._pressRow(rowID)}>
<View>
<View style={styles.row}>
<Image style={styles.thumb} source={imgSource} />
<Text style={styles.text}>
{rowData + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)}
</Text>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
},
_genRows: function(pressData) {
var dataBlob = [];
for (var ii = 0; ii < 100; ii++) {
var pressedText = pressData[ii] ? ' (pressed)' : '';
dataBlob.push('Row ' + ii + pressedText);
}
return dataBlob;
},
_pressRow: function(rowID) {
this._pressData[rowID] = !this._pressData[rowID];
this.setState({dataSource: this.state.dataSource.cloneWithRows(
this._genRows(this._pressData)
)});
},
});
var THUMB_URLS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
var LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';
/* eslint no-bitwise: 0 */
var hashCode = function(str) {
var hash = 15;
for (var ii = str.length - 1; ii >= 0; ii--) {
hash = ((hash << 5) - hash) + str.charCodeAt(ii);
}
return hash;
};
var styles = StyleSheet.create({
row: {
flexDirection: 'row',
justifyContent: 'center',
padding: 10,
backgroundColor: '#F6F6F6',
},
separator: {
height: 1,
backgroundColor: '#CCCCCC',
},
thumb: {
width: 64,
height: 64,
},
text: {
flex: 1,
},
});
module.exports = ListViewSimpleExample;

211
Examples/UIExplorer/NavigatorIOSExample.js Normal file
View File

@@ -0,0 +1,211 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule NavigatorIOSExample
*/
'use strict';
var React = require('react-native/addons');
var ViewExample = require('./ViewExample');
var {
PixelRatio,
ScrollView,
StyleSheet,
Text,
TouchableHighlight,
View,
} = React;
var EmptyPage = React.createClass({
render: function() {
return (
<View style={styles.emptyPage}>
<Text style={styles.emptyPageText}>
{this.props.text}
</Text>
</View>
);
},
});
var NavigatorIOSExample = React.createClass({
statics: {
title: '<NavigatorIOS>',
description: 'iOS navigation capabilities',
},
render: function() {
var recurseTitle = 'Recurse Navigation';
if (!this.props.topExampleRoute) {
recurseTitle += ' - more examples here';
}
return (
<ScrollView style={styles.list}>
<View style={styles.line}/>
<View style={styles.group}>
<View style={styles.row}>
<Text style={styles.rowNote}>
See &lt;UIExplorerApp&gt; for top-level usage.
</Text>
</View>
</View>
<View style={styles.line}/>
<View style={styles.group}>
{this._renderRow(recurseTitle, () => {
this.props.navigator.push({
title: NavigatorIOSExample.title,
component: NavigatorIOSExample,
passProps: {topExampleRoute: this.props.topExampleRoute || this.props.route},
});
})}
{this._renderRow('Push View Example', () => {
this.props.navigator.push({
title: 'Very Long Custom View Example Title',
component: ViewExample,
});
})}
{this._renderRow('Custom Right Button', () => {
this.props.navigator.push({
title: NavigatorIOSExample.title,
component: EmptyPage,
rightButtonTitle: 'Cancel',
onRightButtonPress: () => this.props.navigator.pop(),
passProps: {
text: 'This page has a right button in the nav bar',
}
});
})}
{this._renderRow('Pop', () => {
this.props.navigator.pop();
})}
{this._renderRow('Pop to top', () => {
this.props.navigator.popToTop();
})}
{this._renderRow('Replace here', () => {
var prevRoute = this.props.route;
this.props.navigator.replace({
title: 'New Navigation',
component: EmptyPage,
rightButtonTitle: 'Undo',
onRightButtonPress: () => this.props.navigator.replace(prevRoute),
passProps: {
text: 'The component is replaced, but there is currently no ' +
'way to change the right button or title of the current route',
}
});
})}
{this._renderReplacePrevious()}
{this._renderReplacePreviousAndPop()}
{this._renderPopToTopNavExample()}
</View>
<View style={styles.line}/>
</ScrollView>
);
},
_renderPopToTopNavExample: function() {
if (!this.props.topExampleRoute) {
return null;
}
return this._renderRow('Pop to top NavigatorIOSExample', () => {
this.props.navigator.popToRoute(this.props.topExampleRoute);
});
},
_renderReplacePrevious: function() {
if (!this.props.topExampleRoute) {
// this is to avoid replacing the UIExplorerList at the top of the stack
return null;
}
return this._renderRow('Replace previous', () => {
this.props.navigator.replacePrevious({
title: 'Replaced',
component: EmptyPage,
passProps: {
text: 'This is a replaced "previous" page',
},
wrapperStyle: styles.customWrapperStyle,
});
});
},
_renderReplacePreviousAndPop: function() {
if (!this.props.topExampleRoute) {
// this is to avoid replacing the UIExplorerList at the top of the stack
return null;
}
return this._renderRow('Replace previous and pop', () => {
this.props.navigator.replacePreviousAndPop({
title: 'Replaced and Popped',
component: EmptyPage,
passProps: {
text: 'This is a replaced "previous" page',
},
wrapperStyle: styles.customWrapperStyle,
});
});
},
_renderRow: function(title, onPress) {
return (
<View>
<TouchableHighlight onPress={onPress}>
<View style={styles.row}>
<Text style={styles.rowText}>
{title}
</Text>
</View>
</TouchableHighlight>
<View style={styles.separator} />
</View>
);
},
});
var styles = StyleSheet.create({
customWrapperStyle: {
backgroundColor: '#bbdddd',
},
emptyPage: {
flex: 1,
paddingTop: 64,
},
emptyPageText: {
margin: 10,
},
list: {
backgroundColor: '#eeeeee',
marginTop: 10,
},
group: {
backgroundColor: 'white',
paddingVertical: 10,
},
line: {
backgroundColor: '#bbbbbb',
height: 1 / PixelRatio.get(),
},
row: {
backgroundColor: 'white',
justifyContent: 'center',
paddingHorizontal: 15,
paddingVertical: 8,
},
separator: {
height: 1 / PixelRatio.get(),
backgroundColor: '#bbbbbb',
marginLeft: 15,
},
rowNote: {
fontSize: 17,
},
rowText: {
fontSize: 17,
fontWeight: 'bold',
},
});
module.exports = NavigatorIOSExample;

239
Examples/UIExplorer/PointerEventsExample.js Normal file
View File

@@ -0,0 +1,239 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule PointerEventsExample
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var ExampleBox = React.createClass({
getInitialState: function() {
return {
log: [],
};
},
handleLog: function(msg) {
this.state.log = this.state.log.concat([msg]);
},
flushReactChanges: function() {
this.forceUpdate();
},
/**
* Capture phase of bubbling to append separator before any of the bubbling
* happens.
*/
handleTouchCapture: function() {
this.state.log = this.state.log.concat(['---']);
},
render: function() {
return (
<View>
<View
onTouchEndCapture={this.handleTouchCapture}
onTouchStart={this.flushReactChanges}>
<this.props.Component onLog={this.handleLog} />
</View>
<View
style={styles.logBox}>
<DemoText style={styles.logText}>
{this.state.log.join('\n')}
</DemoText>
</View>
</View>
);
}
});
var NoneExample = React.createClass({
render: function() {
return (
<View
onTouchStart={() => this.props.onLog('A unspecified touched')}
style={styles.box}>
<DemoText style={styles.text}>
A: unspecified
</DemoText>
<View
pointerEvents={View.pointerEvents.none}
onTouchStart={() => this.props.onLog('B none touched')}
style={[styles.box, styles.boxPassedThrough]}>
<DemoText style={[styles.text, styles.textPassedThrough]}>
B: none
</DemoText>
<View
onTouchStart={() => this.props.onLog('C unspecified touched')}
style={[styles.box, styles.boxPassedThrough]}>
<DemoText style={[styles.text, styles.textPassedThrough]}>
C: unspecified
</DemoText>
</View>
</View>
</View>
);
}
});
/**
* Special demo text that makes itself untouchable so that it doesn't destroy
* the experiment and confuse the output.
*/
var DemoText = React.createClass({
render: function() {
return (
<View pointerEvents={View.pointerEvents.none}>
<Text
style={this.props.style}>
{this.props.children}
</Text>
</View>
);
}
});
var BoxNoneExample = React.createClass({
render: function() {
return (
<View
onTouchStart={() => this.props.onLog('A unspecified touched')}
style={styles.box}>
<DemoText style={styles.text}>
A: unspecified
</DemoText>
<View
pointerEvents={View.pointerEvents.boxNone}
onTouchStart={() => this.props.onLog('B boxNone touched')}
style={[styles.box, styles.boxPassedThrough]}>
<DemoText style={[styles.text, styles.textPassedThrough]}>
B: boxNone
</DemoText>
<View
onTouchStart={() => this.props.onLog('C unspecified touched')}
style={styles.box}>
<DemoText style={styles.text}>
C: unspecified
</DemoText>
</View>
<View
pointerEvents={View.pointerEvents.unspecified}
onTouchStart={() => this.props.onLog('C explicitly unspecified touched')}
style={[styles.box]}>
<DemoText style={[styles.text]}>
C: explicitly unspecified
</DemoText>
</View>
</View>
</View>
);
}
});
var BoxOnlyExample = React.createClass({
render: function() {
return (
<View
onTouchStart={() => this.props.onLog('A unspecified touched')}
style={styles.box}>
<DemoText style={styles.text}>
A: unspecified
</DemoText>
<View
pointerEvents={View.pointerEvents.boxOnly}
onTouchStart={() => this.props.onLog('B boxOnly touched')}
style={styles.box}>
<DemoText style={styles.text}>
B: boxOnly
</DemoText>
<View
onTouchStart={() => this.props.onLog('C unspecified touched')}
style={[styles.box, styles.boxPassedThrough]}>
<DemoText style={[styles.text, styles.textPassedThrough]}>
C: unspecified
</DemoText>
</View>
<View
pointerEvents={View.pointerEvents.unspecified}
onTouchStart={() => this.props.onLog('C explicitly unspecified touched')}
style={[styles.box, styles.boxPassedThrough]}>
<DemoText style={[styles.text, styles.textPassedThrough]}>
C: explicitly unspecified
</DemoText>
</View>
</View>
</View>
);
}
});
var exampleClasses = [
{
Component: NoneExample,
title: '`none`',
description: '`none` causes touch events on the container and its child components to pass through to the parent container.',
},
{
Component: BoxNoneExample,
title: '`boxNone`',
description: '`boxNone` causes touch events on the container to pass through and will only detect touch events on its child components.',
},
{
Component: BoxOnlyExample,
title: '`boxOnly`',
description: '`boxOnly` causes touch events on the container\'s child components to pass through and will only detect touch events on the container itself.',
}
];
var infoToExample = (info) => {
return {
title: info.title,
description: info.description,
render: function() {
return <ExampleBox key={info.title} Component={info.Component} />;
},
};
};
var styles = StyleSheet.create({
text: {
fontSize: 10,
color: '#5577cc',
},
textPassedThrough: {
color: '#88aadd',
},
box: {
backgroundColor: '#aaccff',
borderWidth: 1,
borderColor: '#7799cc',
padding: 10,
margin: 5,
},
boxPassedThrough: {
borderColor: '#99bbee',
},
logText: {
fontSize: 9,
},
logBox: {
padding: 20,
margin: 10,
borderWidth: 0.5,
borderColor: '#f0f0f0',
backgroundColor: '#f9f9f9',
},
bottomSpacer: {
marginBottom: 100,
},
});
exports.framework = 'React';
exports.title = 'Pointer Events';
exports.description = '`pointerEvents` is a prop of View that gives control ' +
'of how touches should be handled.';
exports.examples = exampleClasses.map(infoToExample);

96
Examples/UIExplorer/ScrollViewExample.js Normal file
View File

@@ -0,0 +1,96 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ScrollViewExample
*/
'use strict';
var React = require('react-native');
var {
ScrollView,
StyleSheet,
View,
Image
} = React;
exports.title = '<ScrollView>';
exports.description = 'Component that enables scrolling through child components';
exports.examples = [
{
title: '<ScrollView>',
description: 'To make content scrollable, wrap it within a <ScrollView> component',
render: function() {
return <ScrollView
contentInset={{top: -50}}
style={styles.scrollView}>
{THUMBS.map(createThumbRow)}
</ScrollView>;
}
}, {
title: '<ScrollView> (horizontal = true)',
description: 'You can display <ScrollView>\'s child components horizontally rather than vertically',
render: function() {
return <ScrollView
horizontal={true}
contentInset={{top: -50}}
style={[styles.scrollView, styles.horizontalScrollView]}>
{THUMBS.map(createThumbRow)}
</ScrollView>;
}
}];
var Thumb = React.createClass({
shouldComponentUpdate: function(nextProps, nextState) {
return false;
},
render: function() {
return (
<View style={styles.button}>
<Image style={styles.img} source={{uri:this.props.uri}} />
</View>
);
}
});
var THUMBS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
THUMBS = THUMBS.concat(THUMBS); // double length of THUMBS
var createThumbRow = (uri, i) => <Thumb uri={uri}/>;
var styles = StyleSheet.create({
scrollView: {
backgroundColor: '#6A85B1',
height: 300,
},
horizontalScrollView: {
height: 120,
},
containerPage: {
height: 50,
width: 50,
backgroundColor: '#527FE4',
padding: 5,
},
text: {
fontSize: 20,
color: '#888888',
left: 80,
top: 20,
height: 40,
},
button: {
margin: 7,
padding: 5,
alignItems: 'center',
backgroundColor: '#eaeaea',
borderRadius: 3,
},
buttonContents: {
flexDirection: 'row',
width: 64,
height: 64,
},
img: {
width: 64,
height: 64,
}
});

151
Examples/UIExplorer/SpinnerExample.js Normal file
View File

@@ -0,0 +1,151 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule SpinnerExample
*/
'use strict';
var React = require('react-native');
var {
SpinnerIOS,
StyleSheet,
TimerMixin,
View,
} = React;
var ToggleAnimatingSpinner = React.createClass({
mixins: [TimerMixin],
getInitialState: function() {
return {
animating: true,
};
},
setToggleTimeout: function() {
this.setTimeout(
() => {
this.setState({animating: !this.state.animating});
this.setToggleTimeout();
},
1200
);
},
componentDidMount: function() {
this.setToggleTimeout();
},
render: function() {
return (
<SpinnerIOS
animating={this.state.animating}
style={[styles.centering, {height: 80}]}
size={SpinnerIOS.size.large}
/>
);
}
});
exports.framework = 'React';
exports.title = '<SpinnerIOS>';
exports.description = 'Animated loading indicators.';
exports.examples = [
{
title: 'Default (small, white)',
render: function() {
return (
<SpinnerIOS
style={[styles.centering, styles.gray, {height: 40}]}
color="white"
/>
);
}
},
{
title: 'Gray',
render: function() {
return (
<View>
<SpinnerIOS
style={[styles.centering, {height: 40}]}
/>
<SpinnerIOS
style={[styles.centering, {backgroundColor: '#eeeeee', height: 40}]}
/>
</View>
);
}
},
{
title: 'Custom colors',
render: function() {
return (
<View style={styles.horizontal}>
<SpinnerIOS color="#0000ff" />
<SpinnerIOS color="#aa00aa" />
<SpinnerIOS color="#aa3300" />
<SpinnerIOS color="#00aa00" />
</View>
);
}
},
{
title: 'Large',
render: function() {
return (
<SpinnerIOS
style={[styles.centering, styles.gray, {height: 80}]}
color="white"
size={SpinnerIOS.size.large}
/>
);
}
},
{
title: 'Large, custom colors',
render: function() {
return (
<View style={styles.horizontal}>
<SpinnerIOS
size={SpinnerIOS.size.large}
color="#0000ff"
/>
<SpinnerIOS
size={SpinnerIOS.size.large}
color="#aa00aa"
/>
<SpinnerIOS
size={SpinnerIOS.size.large}
color="#aa3300"
/>
<SpinnerIOS
size={SpinnerIOS.size.large}
color="#00aa00"
/>
</View>
);
}
},
{
title: 'Start/stop',
render: function() {
return <ToggleAnimatingSpinner />;
}
},
];
var styles = StyleSheet.create({
centering: {
alignItems: 'center',
justifyContent: 'center',
},
gray: {
backgroundColor: '#cccccc',
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
},
});

281
Examples/UIExplorer/TextExample.ios.js Normal file
View File

@@ -0,0 +1,281 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule TextExample
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var Entity = React.createClass({
render: function() {
return (
<Text style={styles.entity}>
{this.props.children}
</Text>
);
}
});
var AttributeToggler = React.createClass({
getInitialState: function() {
return {fontWeight: 'bold', fontSize: 15};
},
increaseSize: function() {
this.setState({
fontSize: this.state.fontSize + 1
});
},
render: function() {
var curStyle = {fontSize: this.state.fontSize};
return (
<View>
<Text style={curStyle}>
Tap the controls below to change attributes.
</Text>
<Text>
<Text>
See how it will even work on{' '}
<Text style={curStyle}>
this nested text
</Text>
</Text>
</Text>
<Text onPress={this.increaseSize}>
{'>> Increase Size <<'}
</Text>
</View>
);
}
});
exports.title = '<Text>';
exports.description = 'Base component for rendering styled text.';
exports.examples = [
{
title: 'Wrap',
render: function() {
return (
<Text>
The text should wrap if it goes on multiple lines. See, this is going to
the next line.
</Text>
);
},
}, {
title: 'Font Family',
render: function() {
return (
<View>
<Text style={{fontFamily: 'Cochin'}}>
Cochin
</Text>
<Text style={{fontFamily: 'Cochin', fontWeight: 'bold'}}>
Cochin bold
</Text>
<Text style={{fontFamily: 'Helvetica'}}>
Helvetica
</Text>
<Text style={{fontFamily: 'Helvetica', fontWeight: 'bold'}}>
Helvetica bold
</Text>
<Text style={{fontFamily: 'Verdana'}}>
Verdana
</Text>
<Text style={{fontFamily: 'Verdana', fontWeight: 'bold'}}>
Verdana bold
</Text>
</View>
);
},
}, {
title: 'Font Size',
render: function() {
return (
<View>
<Text style={{fontSize: 23}}>
Size 23
</Text>
<Text style={{fontSize: 8}}>
Size 8
</Text>
</View>
);
},
}, {
title: 'Color',
render: function() {
return (
<View>
<Text style={{color: 'red'}}>
Red color
</Text>
<Text style={{color: 'blue'}}>
Blue color
</Text>
</View>
);
},
}, {
title: 'Font Weight',
render: function() {
return (
<Text style={{fontWeight: 'bold'}}>
Move fast and be bold
</Text>
);
},
}, {
title: 'Nested',
description: 'Nested text components will inherit the styles of their ' +
'parents (only backgroundColor is inherited from non-Text parents). ' +
'<Text> only supports other <Text> and raw text (strings) as children.',
render: function() {
return (
<View>
<Text>
(Normal text,
<Text style={{fontWeight: 'bold'}}>
(and bold
<Text style={{fontSize: 11, color: '#527fe4'}}>
(and tiny inherited bold blue)
</Text>
)
</Text>
)
</Text>
<Text style={{fontSize: 12}}>
<Entity>Entity Name</Entity>
</Text>
</View>
);
},
}, {
title: 'Text Align',
render: function() {
return (
<View>
<Text style={{textAlign: 'left'}}>
left left left left left left left left left left left left left left left
</Text>
<Text style={{textAlign: 'center'}}>
center center center center center center center center center center center
</Text>
<Text style={{textAlign: 'right'}}>
right right right right right right right right right right right right right
</Text>
</View>
);
},
}, {
title: 'Spaces',
render: function() {
return (
<Text>
A {'generated'} {' '} {'string'} and some &nbsp;&nbsp;&nbsp; spaces
</Text>
);
},
}, {
title: 'Line Height',
render: function() {
return (
<Text>
<Text style={{lineHeight: 35}}>
A lot of space between the lines of this long passage that should
wrap once.
</Text>
</Text>
);
},
}, {
title: 'Empty Text',
description: 'It\'s ok to have Text with zero or null children.',
render: function() {
return (
<Text />
);
},
}, {
title: 'Toggling Attributes',
render: function() {
return <AttributeToggler />;
},
}, {
title: 'backgroundColor attribute',
description: 'backgroundColor is inherited from all types of views.',
render: function() {
return (
<View style={{backgroundColor: 'yellow'}}>
<Text>
Yellow background inherited from View parent,
<Text style={{backgroundColor: '#ffaaaa'}}>
{' '}red background,
<Text style={{backgroundColor: '#aaaaff'}}>
{' '}blue background,
<Text>
{' '}inherited blue background,
<Text style={{backgroundColor: '#aaffaa'}}>
{' '}nested green background.
</Text>
</Text>
</Text>
</Text>
</Text>
</View>
);
},
}, {
title: 'containerBackgroundColor attribute',
render: function() {
return (
<View>
<View style={{flexDirection: 'row', height: 85}}>
<View style={{backgroundColor: '#ffaaaa', width: 150}} />
<View style={{backgroundColor: '#aaaaff', width: 150}} />
</View>
<Text style={[styles.backgroundColorText, {top: -80}]}>
Default containerBackgroundColor (inherited) + backgroundColor wash
</Text>
<Text style={[
styles.backgroundColorText,
{top: -70, containerBackgroundColor: 'transparent'}]}>
{"containerBackgroundColor: 'transparent' + backgroundColor wash"}
</Text>
</View>
);
},
}, {
title: 'numberOfLines attribute',
render: function() {
return (
<View>
<Text numberOfLines={1}>
Maximum of one line no matter now much I write here. If I keep writing it{"'"}ll just truncate after one line
</Text>
<Text numberOfLines={2} style={{marginTop: 20}}>
Maximum of two lines no matter now much I write here. If I keep writing it{"'"}ll just truncate after two lines
</Text>
<Text style={{marginTop: 20}}>
No maximum lines specified no matter now much I write here. If I keep writing it{"'"}ll just keep going and going
</Text>
</View>
);
},
}];
var styles = StyleSheet.create({
backgroundColorText: {
left: 5,
backgroundColor: 'rgba(100, 100, 100, 0.3)'
},
entity: {
fontWeight: 'bold',
color: '#527fe4',
},
});

188
Examples/UIExplorer/TextInputExample.js Normal file
View File

@@ -0,0 +1,188 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule TextInputExample
*/
'use strict';
var React = require('react-native');
var {
Text,
TextInput,
View,
StyleSheet,
} = React;
var WithLabel = React.createClass({
render: function() {
return (
<View style={styles.labelContainer}>
<View style={styles.label}>
<Text>{this.props.label}</Text>
</View>
{this.props.children}
</View>
);
}
});
var TextEventsExample = React.createClass({
getInitialState: function() {
return {
curText: '<No Event>',
prevText: '<No Event>',
};
},
updateText: function(text) {
this.setState({
curText: text,
prevText: this.state.curText,
});
},
render: function() {
return (
<View>
<TextInput
autoCapitalize={TextInput.autoCapitalizeMode.none}
placeholder="Enter text to see events"
autoCorrect={false}
onFocus={() => this.updateText('onFocus')}
onBlur={() => this.updateText('onBlur')}
onChange={(event) => this.updateText(
'onChange text: ' + event.nativeEvent.text
)}
onEndEditing={(event) => this.updateText(
'onEndEditing text: ' + event.nativeEvent.text
)}
onSubmitEditing={(event) => this.updateText(
'onSubmitEditing text: ' + event.nativeEvent.text
)}
style={styles.default}
/>
<Text style={styles.eventLabel}>
{this.state.curText}{'\n'}
(prev: {this.state.prevText})
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
page: {
paddingBottom: 300,
},
default: {
height: 26,
borderWidth: 0.5,
borderColor: '#0f0f0f',
padding: 4,
flex: 1,
fontSize: 13,
},
multiline: {
borderWidth: 0.5,
borderColor: '#0f0f0f',
flex: 1,
fontSize: 13,
height: 50,
},
eventLabel: {
margin: 3,
fontSize: 12,
},
labelContainer: {
flexDirection: 'row',
marginVertical: 2,
flex: 1,
},
label: {
width: 80,
justifyContent: 'flex-end',
flexDirection: 'row',
marginRight: 10,
paddingTop: 2,
},
});
exports.title = '<TextInput>';
exports.description = 'Single-line text inputs.';
exports.examples = [
{
title: 'Auto-focus',
render: function() {
return <TextInput autoFocus={true} style={styles.default} />;
}
},
{
title: 'Auto-capitalize',
render: function() {
return (
<View>
<WithLabel label="none">
<TextInput
autoCapitalize={TextInput.autoCapitalizeMode.none}
style={styles.default}
/>
</WithLabel>
<WithLabel label="sentences">
<TextInput
autoCapitalize={TextInput.autoCapitalizeMode.sentences}
style={styles.default}
/>
</WithLabel>
<WithLabel label="words">
<TextInput
autoCapitalize={TextInput.autoCapitalizeMode.words}
style={styles.default}
/>
</WithLabel>
<WithLabel label="characters">
<TextInput
autoCapitalize={TextInput.autoCapitalizeMode.characters}
style={styles.default}
/>
</WithLabel>
</View>
);
}
},
{
title: 'Auto-correct',
render: function() {
return (
<View>
<WithLabel label="true">
<TextInput autoCorrect={true} style={styles.default} />
</WithLabel>
<WithLabel label="false">
<TextInput autoCorrect={false} style={styles.default} />
</WithLabel>
</View>
);
}
},
{
title: 'Event handling',
render: () => <TextEventsExample />,
},
{
title: 'Colored input text',
render: function() {
return (
<View>
<TextInput
style={[styles.default, {color: 'blue'}]}
value="Blue"
/>
<TextInput
style={[styles.default, {color: 'green'}]}
value="Green"
/>
</View>
);
}
},
];

134
Examples/UIExplorer/TouchableExample.js Normal file
View File

@@ -0,0 +1,134 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule TouchableExample
*/
'use strict';
var React = require('react-native');
var {
PixelRatio,
Image,
StyleSheet,
Text,
TouchableHighlight,
View,
} = React;
exports.title = '<Touchable*> and onPress';
exports.examples = [
{
title: '<TouchableHighlight>',
description: 'TouchableHighlight works by adding an extra view with a ' +
'black background under the single child view. This works best when the ' +
'child view is fully opaque, although it can be made to work as a simple ' +
'background color change as well with the activeOpacity and ' +
'underlayColor props.',
render: function() {
return (
<View>
<View style={styles.row}>
<TouchableHighlight
style={styles.wrapper}
onPress={() => console.log('stock THW image - highlight')}>
<Image
source={heartImage}
style={styles.image}
/>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
activeOpacity={1}
animationVelocity={0}
underlayColor="rgb(210, 230, 255)"
onPress={() => console.log('custom THW text - hightlight')}>
<View style={styles.wrapperCustom}>
<Text style={styles.text}>
Tap Here For Custom Highlight!
</Text>
</View>
</TouchableHighlight>
</View>
</View>
);
},
}, {
title: '<Text onPress={fn}> with highlight',
render: function() {
return <TextOnPressBox />;
},
}];
var TextOnPressBox = React.createClass({
getInitialState: function() {
return {
timesPressed: 0,
};
},
textOnPress: function() {
this.setState({
timesPressed: this.state.timesPressed + 1,
});
},
render: function() {
var textLog = '';
if (this.state.timesPressed > 1) {
textLog = this.state.timesPressed + 'x text onPress';
} else if (this.state.timesPressed > 0) {
textLog = 'text onPress';
}
return (
<View>
<Text
style={styles.textBlock}
onPress={this.textOnPress}>
Text has built-in onPress handling
</Text>
<View style={styles.logBox}>
<Text>
{textLog}
</Text>
</View>
</View>
);
}
});
var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
var styles = StyleSheet.create({
row: {
alignItems: 'center',
flexDirection: 'row',
},
icon: {
width: 24,
height: 24,
},
image: {
width: 50,
height: 50,
},
text: {
fontSize: 16,
},
wrapper: {
borderRadius: 8,
},
wrapperCustom: {
borderRadius: 8,
padding: 6,
},
logBox: {
padding: 20,
margin: 10,
borderWidth: 1 / PixelRatio.get(),
borderColor: '#f0f0f0',
backgroundColor: '#f9f9f9',
},
textBlock: {
fontWeight: 'bold',
color: 'blue',
},
});

319
Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj Normal file
View File

@@ -0,0 +1,319 @@
// !$*UTF8*$!
{
archiveVersion = 1;
classes = {
};
objectVersion = 46;
objects = {
/* Begin PBXBuildFile section */
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
8323482C1A77B59500B55238 /* libReactKit.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832348291A77B50100B55238 /* libReactKit.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
832348281A77B50100B55238 /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = 834D32361A76971A00F38302 /* ReactKit.xcodeproj */;
proxyType = 2;
remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192;
remoteInfo = ReactKit;
};
/* End PBXContainerItemProxy section */
/* Begin PBXFileReference section */
13B07F961A680F5B00A75B9A /* UIExplorer.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = UIExplorer.app; sourceTree = BUILT_PRODUCTS_DIR; };
13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = "<group>"; };
13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AppDelegate.m; sourceTree = "<group>"; };
13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Images.xcassets; sourceTree = "<group>"; };
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = "<group>"; };
834D32361A76971A00F38302 /* ReactKit.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = ReactKit.xcodeproj; path = ../../ReactKit/ReactKit.xcodeproj; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
8323482C1A77B59500B55238 /* libReactKit.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXFrameworksBuildPhase section */
/* Begin PBXGroup section */
13B07FAE1A68108700A75B9A /* UIExplorer */ = {
isa = PBXGroup;
children = (
13B07FAF1A68108700A75B9A /* AppDelegate.h */,
13B07FB01A68108700A75B9A /* AppDelegate.m */,
13B07FB51A68108700A75B9A /* Images.xcassets */,
13B07FB61A68108700A75B9A /* Info.plist */,
13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
13B07FB71A68108700A75B9A /* main.m */,
);
name = UIExplorer;
sourceTree = "<group>";
};
832348241A77B50100B55238 /* Products */ = {
isa = PBXGroup;
children = (
832348291A77B50100B55238 /* libReactKit.a */,
);
name = Products;
sourceTree = "<group>";
};
83CBB9F61A601CBA00E9B192 = {
isa = PBXGroup;
children = (
834D32361A76971A00F38302 /* ReactKit.xcodeproj */,
13B07FAE1A68108700A75B9A /* UIExplorer */,
83CBBA001A601CBA00E9B192 /* Products */,
);
sourceTree = "<group>";
};
83CBBA001A601CBA00E9B192 /* Products */ = {
isa = PBXGroup;
children = (
13B07F961A680F5B00A75B9A /* UIExplorer.app */,
);
name = Products;
sourceTree = "<group>";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
13B07F861A680F5B00A75B9A /* UIExplorer */ = {
isa = PBXNativeTarget;
buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "UIExplorer" */;
buildPhases = (
13B07F871A680F5B00A75B9A /* Sources */,
13B07F8C1A680F5B00A75B9A /* Frameworks */,
13B07F8E1A680F5B00A75B9A /* Resources */,
);
buildRules = (
);
dependencies = (
);
name = UIExplorer;
productName = "Hello World";
productReference = 13B07F961A680F5B00A75B9A /* UIExplorer.app */;
productType = "com.apple.product-type.application";
};
/* End PBXNativeTarget section */
/* Begin PBXProject section */
83CBB9F71A601CBA00E9B192 /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 0610;
ORGANIZATIONNAME = Facebook;
};
buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "UIExplorer" */;
compatibilityVersion = "Xcode 3.2";
developmentRegion = English;
hasScannedForEncodings = 0;
knownRegions = (
en,
Base,
);
mainGroup = 83CBB9F61A601CBA00E9B192;
productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
projectDirPath = "";
projectReferences = (
{
ProductGroup = 832348241A77B50100B55238 /* Products */;
ProjectRef = 834D32361A76971A00F38302 /* ReactKit.xcodeproj */;
},
);
projectRoot = "";
targets = (
13B07F861A680F5B00A75B9A /* UIExplorer */,
);
};
/* End PBXProject section */
/* Begin PBXReferenceProxy section */
832348291A77B50100B55238 /* libReactKit.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
path = libReactKit.a;
remoteRef = 832348281A77B50100B55238 /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
/* End PBXReferenceProxy section */
/* Begin PBXResourcesBuildPhase section */
13B07F8E1A680F5B00A75B9A /* Resources */ = {
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXResourcesBuildPhase section */
/* Begin PBXSourcesBuildPhase section */
13B07F871A680F5B00A75B9A /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
13B07FC11A68108700A75B9A /* main.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXSourcesBuildPhase section */
/* Begin PBXVariantGroup section */
13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = {
isa = PBXVariantGroup;
children = (
13B07FB21A68108700A75B9A /* Base */,
);
name = LaunchScreen.xib;
sourceTree = "<group>";
};
/* End PBXVariantGroup section */
/* Begin XCBuildConfiguration section */
13B07F941A680F5B00A75B9A /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
INFOPLIST_FILE = "$(SRCROOT)/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = UIExplorer;
};
name = Debug;
};
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
INFOPLIST_FILE = "$(SRCROOT)/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = UIExplorer;
};
name = Release;
};
83CBBA201A601CBA00E9B192 /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
COPY_PHASE_STRIP = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_OPTIMIZATION_LEVEL = 0;
GCC_PREPROCESSOR_DEFINITIONS = (
"DEBUG=1",
"$(inherited)",
);
GCC_SYMBOLS_PRIVATE_EXTERN = NO;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../../ReactKit/**",
);
IPHONEOS_DEPLOYMENT_TARGET = 7.0;
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
SDKROOT = iphoneos;
};
name = Debug;
};
83CBBA211A601CBA00E9B192 /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
COPY_PHASE_STRIP = YES;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../../ReactKit/**",
);
IPHONEOS_DEPLOYMENT_TARGET = 7.0;
MTL_ENABLE_DEBUG_INFO = NO;
SDKROOT = iphoneos;
VALIDATE_PRODUCT = YES;
};
name = Release;
};
/* End XCBuildConfiguration section */
/* Begin XCConfigurationList section */
13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "UIExplorer" */ = {
isa = XCConfigurationList;
buildConfigurations = (
13B07F941A680F5B00A75B9A /* Debug */,
13B07F951A680F5B00A75B9A /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "UIExplorer" */ = {
isa = XCConfigurationList;
buildConfigurations = (
83CBBA201A601CBA00E9B192 /* Debug */,
83CBBA211A601CBA00E9B192 /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
/* End XCConfigurationList section */
};
rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
}

7
Examples/UIExplorer/UIExplorer.xcodeproj/project.xcworkspace/contents.xcworkspacedata generated Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<Workspace
version = "1.0">
<FileRef
location = "self:UIExplorer.xcodeproj">
</FileRef>
</Workspace>

8
Examples/UIExplorer/UIExplorer.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>IDEWorkspaceSharedSettings_AutocreateContextsIfNeeded</key>
<false/>
</dict>
</plist>

86
Examples/UIExplorer/UIExplorer.xcodeproj/xcshareddata/xcschemes/UIExplorer.xcscheme Normal file
View File

@@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<Scheme
LastUpgradeVersion = "0610"
version = "1.3">
<BuildAction
parallelizeBuildables = "YES"
buildImplicitDependencies = "YES">
<BuildActionEntries>
<BuildActionEntry
buildForTesting = "YES"
buildForRunning = "YES"
buildForProfiling = "YES"
buildForArchiving = "YES"
buildForAnalyzing = "YES">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "UIExplorer.app"
BlueprintName = "UIExplorer"
ReferencedContainer = "container:UIExplorer.xcodeproj">
</BuildableReference>
</BuildActionEntry>
</BuildActionEntries>
</BuildAction>
<TestAction
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
shouldUseLaunchSchemeArgsEnv = "YES"
buildConfiguration = "Debug">
<Testables>
</Testables>
<MacroExpansion>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "UIExplorer.app"
BlueprintName = "UIExplorer"
ReferencedContainer = "container:UIExplorer.xcodeproj">
</BuildableReference>
</MacroExpansion>
</TestAction>
<LaunchAction
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
launchStyle = "0"
useCustomWorkingDirectory = "NO"
buildConfiguration = "Debug"
ignoresPersistentStateOnLaunch = "NO"
debugDocumentVersioning = "YES"
allowLocationSimulation = "YES">
<BuildableProductRunnable>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "UIExplorer.app"
BlueprintName = "UIExplorer"
ReferencedContainer = "container:UIExplorer.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
<AdditionalOptions>
</AdditionalOptions>
</LaunchAction>
<ProfileAction
shouldUseLaunchSchemeArgsEnv = "YES"
savedToolIdentifier = ""
useCustomWorkingDirectory = "NO"
buildConfiguration = "Release"
debugDocumentVersioning = "YES">
<BuildableProductRunnable>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "UIExplorer.app"
BlueprintName = "UIExplorer"
ReferencedContainer = "container:UIExplorer.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
</ProfileAction>
<AnalyzeAction
buildConfiguration = "Debug">
</AnalyzeAction>
<ArchiveAction
buildConfiguration = "Release"
revealArchiveInOrganizer = "YES">
</ArchiveAction>
</Scheme>

44
Examples/UIExplorer/UIExplorerApp.js Normal file
View File

@@ -0,0 +1,44 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule UIExplorerApp
*/
'use strict';
var React = require('react-native/addons');
var UIExplorerList = require('./UIExplorerList');
var {
Bundler,
NavigatorIOS,
StyleSheet,
} = React;
var UIExplorerApp = React.createClass({
render: function() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'UIExplorer',
component: UIExplorerList,
}}
itemWrapperStyle={styles.itemWrapper}
tintColor='#008888'/>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
},
itemWrapper: {
backgroundColor: '#eaeaea',
},
});
Bundler.registerComponent('UIExplorerApp', () => UIExplorerApp);
module.exports = UIExplorerApp;

93
Examples/UIExplorer/UIExplorerBlock.js Normal file
View File

@@ -0,0 +1,93 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule UIExplorerBlock
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var UIExplorerBlock = React.createClass({
propTypes: {
title: React.PropTypes.string,
description: React.PropTypes.string,
},
getInitialState: function() {
return {description: null};
},
render: function() {
var description;
if (this.props.description) {
description =
<Text style={styles.descriptionText}>
{this.props.description}
</Text>;
}
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>
{this.props.title}
</Text>
{description}
</View>
<View style={styles.children}>
{this.props.children}
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
borderRadius: 3,
borderWidth: 0.5,
borderColor: '#d6d7da',
backgroundColor: '#ffffff',
margin: 10,
marginVertical: 5,
overflow: 'hidden',
},
titleContainer: {
borderWidth: 0.5,
borderColor: '#d6d7da',
backgroundColor: '#f6f7f8',
paddingHorizontal: 10,
paddingVertical: 5,
},
titleRow: {
flexDirection: 'row',
justifyContent: 'space-between',
},
titleText: {
fontSize: 14,
fontWeight: 'bold',
},
descriptionText: {
fontSize: 14,
},
disclosure: {
position: 'absolute',
top: 0,
right: 0,
padding: 10,
},
disclosureIcon: {
width: 12,
height: 8,
},
children: {
padding: 10,
}
});
module.exports = UIExplorerBlock;

111
Examples/UIExplorer/UIExplorerList.js Normal file
View File

@@ -0,0 +1,111 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*/
'use strict';
var React = require('react-native/addons');
var {
PixelRatio,
ScrollView,
StyleSheet,
Text,
TouchableHighlight,
View,
invariant,
} = React;
var createExamplePage = require('./createExamplePage');
var EXAMPLES = [
require('./ViewExample'),
require('./LayoutExample'),
require('./TextExample.ios'),
require('./TextInputExample'),
require('./ExpandingTextExample'),
require('./ImageExample'),
require('./ListViewSimpleExample'),
require('./NavigatorIOSExample'),
require('./PointerEventsExample'),
require('./TouchableExample'),
require('./SpinnerExample'),
require('./ScrollViewExample'),
];
var UIExplorerList = React.createClass({
render: function() {
return (
<ScrollView style={styles.list}>
<View style={styles.group}>
<View style={styles.line} />
{EXAMPLES.map(this._renderRow)}
<View style={styles.line} />
</View>
</ScrollView>
);
},
_renderRow: function(example) {
invariant(example.title, 'Example must provide a title.');
return (
<View>
<TouchableHighlight onPress={() => this._onPressRow(example)}>
<View style={styles.row}>
<Text style={styles.rowTitleText}>
{example.title}
</Text>
<Text style={styles.rowDetailText}>
{example.description}
</Text>
</View>
</TouchableHighlight>
<View style={styles.separator} />
</View>
);
},
_onPressRow: function(example) {
var Component = example.examples ?
createExamplePage(null, example) :
example;
this.props.navigator.push({
title: Component.title,
component: Component,
});
},
});
var styles = StyleSheet.create({
list: {
backgroundColor: '#eeeeee',
},
group: {
backgroundColor: 'white',
marginVertical: 25,
},
line: {
backgroundColor: '#bbbbbb',
height: 1 / PixelRatio.get(),
},
row: {
backgroundColor: 'white',
justifyContent: 'center',
paddingHorizontal: 15,
paddingVertical: 8,
},
separator: {
height: 1 / PixelRatio.get(),
backgroundColor: '#bbbbbb',
marginLeft: 15,
},
rowTitleText: {
fontSize: 17,
fontWeight: 'bold',
},
rowDetailText: {
fontSize: 15,
color: '#888888',
lineHeight: 20,
},
});
module.exports = UIExplorerList;

68
Examples/UIExplorer/UIExplorerPage.js Normal file
View File

@@ -0,0 +1,68 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule UIExplorerPage
*/
'use strict';
var React = require('react-native');
var {
ScrollView,
StyleSheet,
View,
} = React;
var UIExplorerTitle = require('./UIExplorerTitle');
var UIExplorerPage = React.createClass({
propTypes: {
keyboardShouldPersistTaps: React.PropTypes.bool,
noScroll: React.PropTypes.bool,
noSpacer: React.PropTypes.bool,
},
render: function() {
var ContentWrapper;
var wrapperProps = {};
if (this.props.noScroll) {
ContentWrapper = View;
} else {
ContentWrapper = ScrollView;
wrapperProps.keyboardShouldPeristTaps = true;
wrapperProps.keyboardDismissMode =
ScrollView.keyboardDismissMode.Interactive;
}
var title = this.props.title ?
<UIExplorerTitle title={this.props.title} /> :
null;
var spacer = this.props.noSpacer ? null : <View style={styles.spacer} />;
return (
<View style={styles.container}>
{title}
<ContentWrapper
style={styles.wrapper}
{...wrapperProps}>
{this.props.children}
{spacer}
</ContentWrapper>
</View>
);
},
});
var styles = StyleSheet.create({
container: {
backgroundColor: '#e9eaed',
paddingTop: 15,
flex: 1,
},
spacer: {
height: 270,
},
wrapper: {
flex: 1,
},
});
module.exports = UIExplorerPage;

43
Examples/UIExplorer/UIExplorerTitle.js Normal file
View File

@@ -0,0 +1,43 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule UIExplorerTitle
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var UIExplorerTitle = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.text}>
{this.props.title}
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
margin: 10,
height: 45,
padding: 10,
backgroundColor: 'white',
},
text: {
fontSize: 19,
fontWeight: 'bold',
},
});
module.exports = UIExplorerTitle;

123
Examples/UIExplorer/ViewExample.js Normal file
View File

@@ -0,0 +1,123 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ViewExample
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
var ViewExample = React.createClass({
statics: {
title: '<View>',
description: 'Basic building block of all UI.'
},
getInitialState: function() {
return {
textBorderExampleHeight: 20,
};
},
render: function() {
return (
<UIExplorerPage title={this.props.navigator ? null : '<View>'}>
<UIExplorerBlock title="Background Color">
<View style={{backgroundColor: '#527FE4', padding: 5}}>
<Text style={{fontSize: 11}}>
Blue background
</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Border">
<View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
<Text style={{fontSize: 11}}>5px blue border</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Padding/Margin">
<View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
<View style={[styles.box, {padding: 5}]}>
<Text style={{fontSize: 11}}>5px padding</Text>
</View>
<View style={[styles.box, {margin: 5}]}>
<Text style={{fontSize: 11}}>5px margin</Text>
</View>
<View style={[styles.box, {margin: 5, padding: 5, alignSelf: 'flex-start'}]}>
<Text style={{fontSize: 11}}>
5px margin and padding,
</Text>
<Text style={{fontSize: 11}}>
widthAutonomous=true
</Text>
</View>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Border Radius">
<View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
<Text style={{fontSize: 11}}>
Too much use of `borderRadius` (especially large radii) on
anything which is scrolling may result in dropped frames.
Use sparingly.
</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Circle with Border Radius">
<View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
</UIExplorerBlock>
<UIExplorerBlock title="Overflow">
<View style={{flexDirection: 'row'}}>
<View
style={{
width: 95,
height: 10,
marginRight: 10,
marginBottom: 5,
overflow: 'hidden',
borderWidth: 0.5,
}}>
<View style={{width: 200, height: 20}}>
<Text>Overflow hidden</Text>
</View>
</View>
<View style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
<View style={{width: 200, height: 20}}>
<Text>Overflow visible</Text>
</View>
</View>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Opacity">
<View style={{opacity: 0}}><Text>Opacity 0</Text></View>
<View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
<View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
<View style={{opacity: 0.5}}><Text>Opacity 0.5</Text></View>
<View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
<View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
<View style={{opacity: 1}}><Text>Opacity 1</Text></View>
</UIExplorerBlock>
</UIExplorerPage>
);
},
updateHeight: function() {
var height = this.state.textBorderExampleHeight === 50 ? 20 : 50;
this.setState({textBorderExampleHeight: height});
},
});
var styles = StyleSheet.create({
box: {
backgroundColor: '#527FE4',
borderColor: '#000033',
borderWidth: 1,
}
});
module.exports = ViewExample;

59
Examples/UIExplorer/createExamplePage.js Normal file
View File

@@ -0,0 +1,59 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule createExamplePage
*/
'use strict';
var React = require('react-native');
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
var invariant = require('invariant');
var createExamplePage = function(title, exampleModule) {
invariant(!!exampleModule.examples, 'The module must have examples');
var ExamplePage = React.createClass({
statics: {
title: exampleModule.title,
description: exampleModule.description,
},
getBlock: function(example) {
// Hack warning: This is a hack because the www UI explorer requires
// renderComponent to be called.
var originalRenderComponent = React.renderComponent;
var originalRender = React.render;
var renderedComponent;
React.render = React.renderComponent = function(element, container) {
renderedComponent = element;
};
var result = example.render(null);
if (result) {
renderedComponent = result;
}
React.renderComponent = originalRenderComponent;
React.render = originalRender;
return (
<UIExplorerBlock
title={example.title}
description={example.description}>
{renderedComponent}
</UIExplorerBlock>
);
},
render: function() {
return (
<UIExplorerPage title={title}>
{exampleModule.examples.map(this.getBlock)}
</UIExplorerPage>
);
}
});
return ExamplePage;
};
module.exports = createExamplePage;

10
Examples/UIExplorer/main.m Normal file
View File

@@ -0,0 +1,10 @@
// Copyright 2004-present Facebook. All Rights Reserved.
#import <UIKit/UIKit.h>
#import "AppDelegate.h"
int main(int argc, char * argv[]) {
@autoreleasepool {
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
}
}