get started with React Native-001

前端之家收集整理的这篇文章主要介绍了get started with React Native-001前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

http://facebook.github.io/react-native/docs/getting-started.html#content

Requirements

  1. OS X - This repo only contains the iOS implementation right now,and Xcode only runs on Mac.
  2. New to Xcode?Download itfrom the Mac App Store.
  3. Homebrewis the recommended way to install node,watchman,and flow.
  4. brew install node. New to node or npm?
  5. brew install watchman. We recommend installingwatchman,otherwise you might hit a node file watching bug.
  6. brew install flow. If you want to useflow.

Quick start

  • npm install -g react-native-cli
  • react-native init AwesomeProject

In the newly created folderAwesomeProject/

  • OpenAwesomeProject.xcodeprojand hit run in Xcode
  • Openindex.ios.jsin your text editor of choice and edit some lines
  • Hit cmd+R (twice) in your iOS simulator to reload the app and see your change!

Congratulations! You've just successfully run and modified your first React Native app.

创建项目





初次打开的项目结构





#import "AppDelegate.h"

#import "RCTRootView.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  // 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/index.ios.bundle"];

  // OPTION 2
  // Load from pre-bundled file on disk. To re-generate the static bundle,run
  //
  // $ curl http://localhost:8081/index.ios.bundle -o main.jsbundle
  //
  // and uncomment the next following line
  // jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"AwesomeProject"
                                                   launchOptions:launchOptions];

  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;
}




















猜你在找的React相关文章