2018/12/20 v-Kansai 発表資料

1. 1 2/
- / -
/ NO@
8
0 1 / /1 2 / -

2. •
• 6B?B =? C ?
•
• / 0 . 4?= 4
C
•
•
0 =7
AA A 6B?DB : =7

3. :
• V . 0/ dr ia j l / .
• 3 1 J n K
• A
• o

4. • : :
• V N
/ - . . - .-

5. •
➜ vue npm install -g react-native-cli
/usr/local/bin/react-native -> /usr/local/lib/node_modules/react-native-cli/index.js
+ react-native-cli@2.0.1
added 41 packages from 15 contributors in 8.184s
➜ vue npm install -g create-react-native-app
/usr/local/bin/create-react-native-app -> /usr/local/lib/node_modules/create-react-
native-app/build/index.js
+ create-react-native-app@2.0.2
added 28 packages from 47 contributors in 4.796s

6. •
➜ vue npm install -g vue-native-cli
/usr/local/bin/vue-native -> /usr/local/lib/node_modules/vue-native-
cli/src/index.js
+ vue-native-cli@0.0.3
added 62 packages from 44 contributors in 7.411s

7. L
• (
) E L
➜ vue vue-native init helloWorld
Installed Crna Version create-react-native-app version: 2.0.2
Creating Vue-Native helloWorld App
⠋ Creating Crna helloWorld project
This command requires Expo CLI.
Do you want to install it globally [Y/n]?

8. •
Do you want to install it globally [Y/n]? y
Installing the package 'expo-cli'...
Expo CLI installed. You can run `expo --help` for instructions.
? Choose a template:
❯ blank
minimum dependencies to run and an empty root component
tabs
several example screens and tabs using react-navigation

9. •
? Choose a template: expo-template-blank
[10:13:51] Extracting project files...

10. (
• ꉺꈊꉺ
? Choose a template: expo-template-blank
[10:13:51] Extracting project files...
[10:23:51] request to https://registry.npmjs.org/expo-template-blank
failed, reason: connect ETIMEDOUT 104.16.23.35:443
Create Crna helloWorld project
Installed Vue Native Dependency Packages
Installed Vue Native Dev-Dependency Packages
fs.js:115
throw err;
^
Error: ENOENT: no such file or directory, open 'app.json'
at Object.openSync (fs.js:436:3)
at Object.readFileSync (fs.js:341:35)

12. /
• / /// =
➜ vue vue-native init helloWorld
Installed Crna Version create-react-native-app version: 2.0.2
prompt: Directory helloWorld already exists. Continue?: (no) yes
Removed helloWorld project
Creating Vue-Native helloWorld App
⠋ Creating Crna helloWorld project
? Choose a template: (Use arrow keys)
❯ blank
minimum dependencies to run and an empty root component
tabs
several example screens and tabs using react-navigation

13. •
[10:26:57] Extracting project files...
[10:36:54] request to https://registry.npmjs.org/expo-template-blank failed,
reason: connect ETIMEDOUT 104.16.25.35:443
Create Crna helloWorld project
Installed Vue Native Dependency Packages
Installed Vue Native Dev-Dependency Packages
readline.js:1032
throw err;
^
Error: ENOENT: no such file or directory, open 'app.json'
at Object.openSync (fs.js:436:3)
at Object.readFileSync (fs.js:341:35)

14. •
•
•
sudo npm uninstall npm -g
brew uninstall node.js
nodebrew install-binary latest
curl -L git.io/nodebrew | perl - setup
vi ~/.bash_profile
source ~/.bash_profile
nodebrew install-binary latest
nodebrew ls
nodebrew use v11.5.0

15. •
➜ vue vue-native init helloWorld
Installed Crna Version create-react-native-app version: 2.0.2
Creating Vue-Native helloWorld App
⠋ Creating Crna helloWorld project
? Choose a template: expo-template-blank
[12:57:33] Extracting project files...
[12:57:34] Customizing project...
[12:57:34] Initialized a git repository.
[12:57:34] Installing dependencies...
⸨ ░░░░░░░░░░░░░░░░⸩ ⠇ fetchMetadata: sill resolveWithNewModule react-native@0.57.1
checking installable status

16. 2
• ) ! (
Completed Installing Vue Native helloWorld App

17. • 1 A
› Press a to run on Android device/emulator, or i to run on iOS simulator.
› Press c to show info on connecting new devices.
› Press d to open DevTools in the default web browser.
› Press shift-d to disable automatically opening DevTools at startup.
› Press e to send an app link with email/SMS.
› Press p to toggle production mode. (current mode: development)
› Press r to restart bundler, or shift-r to restart and clear cache.
› Press s to sign in.
/

18. 1 3 4 4 5

20. •
[14:03:24] Trying to open the project in iOS
simulator...
[14:03:27] Downloading latest version of Expo
|[14:03:28] Error installing or running app.
Error: Request failed with status code 503
Press ? to show a list of all available commands.
/

21. •
•
npm install -g create-react-native-app

22. (
• ) !
(((

23. • npm install -g react-native-cli
•

25. •
[15:09:44] Unable to resolve "../../App" from "node_modules/expo/AppEntry.js"

26. 9
•
E E 2

27. •

28. •
•
brew install watchman
Error: Xcode alone is not sufficient on
High Sierra.
Install the Command Line Tools:
xcode-select --install

29. watchman watch-del-all && react-native start --reset-cache
{
"version": "4.9.0",
"roots": []
}
┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ Running Metro Bundler on port 8081. │
│ │
│ Keep Metro running while developing on any JS projects. Feel free to │
│ close this tab and run your own Metro instance if you prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/workspace/vue/helloWorld
warning: the transform cache was reset.
Loading dependency graph, done.

30. •

32. • . . . 03
• 0 1

33. -