%3CLINGO-SUB%20id%3D%22lingo-sub-1100495%22%20slang%3D%22en-US%22%3EReact%20Native%20for%20Windows%20%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%80%82%E3%81%9D%E3%81%97%E3%81%A6%E5%9E%8B%E3%82%82%E6%89%8B%E3%81%AB%E5%85%A5%E3%82%8C%E3%82%88%E3%81%86%E3%80%82%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1100495%22%20slang%3D%22en-US%22%3E%3CP%3EReact%20Native%20for%20Windows%20%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F%E3%81%AE%E3%81%A7%E5%82%99%E5%BF%98%E9%8C%B2%E3%82%82%E3%81%8B%E3%81%AD%E3%81%A6%E6%89%8B%E9%A0%86%E3%82%92%E3%83%A1%E3%83%A2%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3C%2FP%3E%0A%3CP%3E%E4%BD%9C%E6%A5%AD%E9%96%8B%E5%A7%8B%E6%99%82%E7%82%B9%E3%81%AE%E7%A7%81%E3%81%AE%E7%92%B0%E5%A2%83%E3%81%AF%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EWindows%2010%20Pro%201909%20(%E8%A8%AD%E5%AE%9A%E3%82%A2%E3%83%97%E3%83%AA%E3%81%8B%E3%82%89%E9%96%8B%E7%99%BA%E8%80%85%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%EF%BC%89%3C%2FLI%3E%0A%3CLI%3EVisual%20Studio%202019%2016.4.2%3CUL%3E%0A%3CLI%3E%E3%83%A6%E3%83%8B%E3%83%90%E3%83%BC%E3%82%B5%E3%83%AB%20Windows%20%E3%83%97%E3%83%A9%E3%83%83%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%89%E3%81%AE%20%3CSTRONG%3EC%2B%2B(v141)%20%E3%83%A6%E3%83%8B%E3%83%90%E3%83%BC%E3%82%B5%E3%83%AB%20Windows%20%E3%83%97%E3%83%A9%E3%83%83%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%20%E3%83%84%E3%83%BC%E3%83%AB%3C%2FSTRONG%3E%E3%80%82%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%A7%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%8C%E5%85%A5%E3%81%A3%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E3%81%AE%E3%81%A7%E5%85%A5%E3%82%8C%E3%82%8B%E3%80%82142%20%E3%81%98%E3%82%83%E3%81%AA%E3%81%8F%E3%81%A6%20141%20%E3%81%AA%E3%81%AE%E3%81%A7%E6%B3%A8%E6%84%8F%3C%2FLI%3E%0A%3CLI%3E%E5%80%8B%E5%88%A5%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%8B%E3%82%89%20%3CSTRONG%3EMSVC%20v141%20-%20VS%202017%20C%2B%2B%20ARM%20%E3%83%93%E3%83%AB%E3%83%89%E3%83%84%E3%83%BC%E3%83%AB(v14.16)%3C%2FSTRONG%3E%E3%80%81%3CSTRONG%3EMSVC%20v141%20-%20VS%202017%20C%2B%2B%20x64%2Fx86%20%E3%83%93%E3%83%AB%E3%83%89%20%E3%83%84%E3%83%BC%E3%83%AB%20(v14%2F16)%3C%2FSTRONG%3E%20%E3%81%AE%202%20%E3%81%A4%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3C%2FLI%3E%0A%3CLI%3ENode.js%20v12.9.1%3CSTRONG%3E%20(%E6%B3%A8%E6%84%8F%EF%BC%9A%E7%8F%BE%E6%99%82%E7%82%B9%E3%81%A7%E6%9C%80%E6%96%B0%E3%81%AE%20v12.14.1%20%E3%82%92%E4%BD%BF%E3%81%86%E3%81%A8%E3%83%93%E3%83%AB%E3%83%89%E6%99%82%E3%81%AB%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%EF%BC%89%3C%2FSTRONG%3E%3C%2FLI%3E%0A%3CLI%3Eyarn%201.21.1%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%E3%81%BE%E3%81%9A%E3%80%81%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%82%92%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E5%BE%93%E3%81%A3%E3%81%A6%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2Freact-native-windows%2Fblob%2Fmaster%2Fvnext%2Fdocs%2FConsumingRNW.md%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fmicrosoft%2Freact-native-windows%2Fblob%2Fmaster%2Fvnext%2Fdocs%2FConsumingRNW.md%3C%2FA%3E%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId--1416457512%22%20id%3D%22toc-hId--1416457512%22%3E%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%3C%2FH2%3E%0A%3CP%3Enpm%20install%20-g%20react-native-cli%20%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6%E5%85%A5%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82%E4%BB%8A%E6%97%A5%E6%99%82%E7%82%B9%E3%81%A7%E3%81%AF%20react-native-cli%402.0.1%20%E3%81%8C%E5%85%A5%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3C%2FP%3E%0A%3CP%3E%E3%81%93%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%20React%20Native%20%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%E4%BB%BB%E6%84%8F%E3%81%AE%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC%E3%81%A7%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Ereact-native%20init%20ReactNativeHelloWorld%20--version%200.60.6%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CBR%20%2F%3E%E5%88%9D%E5%9B%9E%E5%AE%9F%E8%A1%8C%E3%81%AF%E5%90%84%E7%A8%AE%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%81%AE%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%AA%E3%81%A9%E3%81%8C%E8%B5%B0%E3%82%8B%E3%81%AE%E3%81%A7%E6%99%82%E9%96%93%E3%81%8C%E3%81%8B%E3%81%8B%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8C%E3%82%B3%E3%83%BC%E3%83%92%E3%83%BC%E3%81%A7%E3%82%82%E9%A3%B2%E3%82%93%E3%81%A7%E5%BE%85%E3%81%A1%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82%E6%AC%A1%E3%81%AB%E3%80%81%E3%81%93%E3%81%93%E3%81%AB%20React%20Native%20for%20Windows%20%E3%82%92%E5%85%A5%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82%E3%81%93%E3%81%93%E3%81%A7%E5%85%A5%E3%82%8C%E3%82%8B%20React%20Native%20for%20Windows%20%E3%81%AF%20vnext%20%E3%81%A8%E8%A8%80%E3%82%8F%E3%82%8C%E3%82%8B%20C%2B%2B%20%E3%81%A7%E5%AE%9F%E8%A3%85%E3%81%95%E3%82%8C%E3%81%9F%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E3%81%AE%E3%81%84%E3%81%84%E6%96%B9%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82yarn%20%EF%BC%88%E3%82%82%E3%81%97%E3%81%8F%E3%81%AF%20npm%EF%BC%89%E3%81%A7%E5%85%A5%E3%82%8C%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E5%87%BA%E6%9D%A5%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%E7%A7%81%E3%81%AF%20yarn%20%E3%81%AA%E3%81%AE%E3%81%A7%E3%80%81%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7%E5%85%A5%E3%82%8C%E3%81%A6%20React%20Native%20for%20Windows%20%E9%96%A2%E9%80%A3%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E7%94%9F%E6%88%90%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3Eyarn%20add%20rnpm-plugin-windows%0Areact-native%20windows%20--template%20vnext%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CBR%20%2F%3E%E4%BD%95%E3%81%8B%E6%96%B0%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%AE%20metro.config.js%20%E3%81%AB%E7%BD%AE%E3%81%8D%E6%8F%9B%E3%81%88%E3%82%8B%E3%81%8B%EF%BC%9F%E3%81%A8%E8%81%9E%E3%81%8B%E3%82%8C%E3%81%9F%E3%81%AE%E3%81%A7%20y%20%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E6%9B%B4%E6%96%B0%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3EDo%20you%20want%20to%20keep%20your%20metro.config.js%20or%20replace%20it%20with%20the%20latest%20version%3F%0AIf%20you%20ever%20made%20any%20changes%20to%20this%20file%2C%20you'll%20probably%20want%20to%20keep%20it.%0AYou%20can%20see%20the%20new%20version%20here%3A%20C%3A%5CUsers%5Ck_ota%5CDocuments%5CRepos%5Crunceel%5CReactNativeHelloWorld%5Cnode_modules%5Creact-native-windows%5Clocal-cli%5Cgenerator-windows%5Ctemplates%5Cmetro.config.js%0ADo%20you%20want%20to%20replace%20metro.config.js%3F%20Answer%20y%20to%20replace%2C%20n%20to%20keep%20your%20version%3A%0Ay%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Ewindows%20%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC%E3%81%8C%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E7%9B%B4%E4%B8%8B%E3%81%AB%E7%94%9F%E6%88%90%E3%81%95%E3%82%8C%E3%81%A6%E3%80%81%E3%81%9D%E3%81%AE%E4%B8%AD%E3%81%AB%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164664i17AED58DA69E1389%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_0.png%22%20title%3D%22clipboard_image_0.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%E3%81%93%E3%82%8C%E3%82%92%E9%96%8B%E3%81%84%E3%81%A6%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%82%82%E5%87%BA%E6%9D%A5%E3%81%BE%E3%81%99%E3%81%8C%E3%80%81%E4%BB%8A%E5%9B%9E%E3%81%AF%20Visual%20Studio%20Code%20%E3%81%A7%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F%E3%81%84%E3%81%A8%E6%80%9D%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3EVisual%20Studio%20Code%20%E3%82%92%E7%AE%A1%E7%90%86%E8%80%85%E3%81%A8%E3%81%97%E3%81%A6%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%EF%BC%88%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E4%B8%8A%E3%81%AB%E3%81%AF%E8%A8%98%E8%BC%89%E3%81%AF%E3%81%AA%E3%81%84%E3%81%AE%E3%81%A7%E3%81%99%E3%81%8C%E3%80%81%E7%AE%A1%E7%90%86%E8%80%85%E3%83%A2%E3%83%BC%E3%83%89%E3%81%A7%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%AA%E3%81%84%E3%81%A8%E7%A7%81%E3%81%AE%E4%BD%9C%E6%A5%AD%E7%92%B0%E5%A2%83%E3%81%A7%E3%81%AF%E3%80%81%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%AB%E5%A4%B1%E6%95%97%E3%81%97%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%EF%BC%89Visual%20Studio%20Code%20%E3%81%A7%20ReactNativeHelloWorld%20%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC%E3%82%92%E9%96%8B%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82Visual%20Studio%20Code%20%E3%81%AB%20React%20Native%20Tools%20%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E3%81%AF%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EVisual%20Studio%20Code%20%E3%81%AE%20launch.json%20%E3%82%92%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%A6%20F5%20%E3%82%92%E6%8A%BC%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%7B%0A%20%20%20%20%2F%2F%20Use%20IntelliSense%20to%20learn%20about%20possible%20attributes.%0A%20%20%20%20%2F%2F%20Hover%20to%20view%20descriptions%20of%20existing%20attributes.%0A%20%20%20%20%2F%2F%20For%20more%20information%2C%20visit%3A%20%3CA%20href%3D%22https%3A%2F%2Fgo.microsoft.com%2Ffwlink%2F%3Flinkid%3D830387%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgo.microsoft.com%2Ffwlink%2F%3Flinkid%3D830387%3C%2FA%3E%0A%20%20%20%20%22version%22%3A%20%220.2.0%22%2C%0A%20%20%20%20%22configurations%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22Debug%20Windows%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22cwd%22%3A%20%22%24%7BworkspaceFolder%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22reactnative%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22request%22%3A%20%22launch%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22platform%22%3A%20%22windows%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%E5%88%9D%E5%9B%9E%E8%B5%B7%E5%8B%95%E3%81%AF%E5%87%84%E3%81%8F%E6%99%82%E9%96%93%E3%81%8C%E3%81%8B%E3%81%8B%E3%82%8B%E3%81%AE%E3%81%A7%E3%82%B3%E3%83%BC%E3%83%92%E3%83%BC%E3%81%A7%E3%82%82%E9%A3%B2%E3%82%93%E3%81%A7%E6%99%82%E9%96%93%E3%82%92%E3%81%A4%E3%81%B6%E3%81%97%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82%E3%83%93%E3%83%AB%E3%83%89%E3%81%AE%E9%80%B2%E6%8D%97%E3%81%AF%20Visual%20Studio%20Code%20%E3%81%AE%20Output%20%E3%81%8B%E3%82%89%20React%20native%3A%20Run%20windows%20%E3%81%A7%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164687iBC1449F5AF4DCE22%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22clipboard_image_0.png%22%20title%3D%22clipboard_image_0.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%E6%9A%AB%E3%81%8F%E3%81%99%E3%82%8B%E3%81%A8%E3%80%81%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%20Window%20%E3%81%8C%E8%B5%B7%E5%8B%95%E3%81%97%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164691i2FE1E741B39A457D%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_1.png%22%20title%3D%22clipboard_image_1.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-1071055321%22%20id%3D%22toc-hId-1071055321%22%3E%E5%9E%8B%E3%81%8C%E6%AC%B2%E3%81%97%E3%81%84%3C%2FH2%3E%0A%3CP%3ETypeScript%20%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82%E6%97%A2%E5%AD%98%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AB%20TypeScript%20%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E6%89%8B%E9%A0%86%E3%81%8C%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AB%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ffacebook.github.io%2Freact-native%2Fdocs%2Ftypescript%23adding-typescript-to-an-existing-project%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Ffacebook.github.io%2Freact-native%2Fdocs%2Ftypescript%23adding-typescript-to-an-existing-project%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%E3%81%93%E3%81%AE%E6%89%8B%E9%A0%86%E3%81%AB%E6%B2%BF%E3%81%A3%E3%81%A6%E3%80%81%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6%E3%81%84%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3Eyarn%20add%20typescript%20%40types%2Fjest%20%40types%2Freact%20%40types%2Freact-native%20%40types%2Freact-test-renderer%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CBR%20%2F%3E%E3%81%9D%E3%81%97%E3%81%A6%E3%80%81tsconfig.json%20%E3%82%92%E4%BB%A5%E4%B8%8B%E3%81%AE%E5%86%85%E5%AE%B9%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%E4%B8%80%E9%83%A8%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%A8%E5%A4%89%E3%81%88%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%8C%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%A7%E3%81%AF%20json%20%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%20import%20%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%A7%E3%80%81%E3%81%9D%E3%82%8C%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%20resolveJsonModule%20%E3%82%92%20true%20%E3%81%AB%E3%81%97%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%7B%0A%20%20%20%20%22compilerOptions%22%3A%20%7B%0A%20%20%20%20%20%20%22allowJs%22%3A%20true%2C%0A%20%20%20%20%20%20%22allowSyntheticDefaultImports%22%3A%20true%2C%0A%20%20%20%20%20%20%22esModuleInterop%22%3A%20true%2C%0A%20%20%20%20%20%20%22isolatedModules%22%3A%20true%2C%0A%20%20%20%20%20%20%22jsx%22%3A%20%22react%22%2C%0A%20%20%20%20%20%20%22lib%22%3A%20%5B%22es6%22%5D%2C%0A%20%20%20%20%20%20%22moduleResolution%22%3A%20%22node%22%2C%0A%20%20%20%20%20%20%22noEmit%22%3A%20true%2C%0A%20%20%20%20%20%20%22strict%22%3A%20true%2C%0A%20%20%20%20%20%20%22target%22%3A%20%22esnext%22%2C%0A%20%20%20%20%20%20%22resolveJsonModule%22%3A%20true%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22exclude%22%3A%20%5B%0A%20%20%20%20%20%20%22node_modules%22%2C%0A%20%20%20%20%20%20%22babel.config.js%22%2C%0A%20%20%20%20%20%20%22metro.config.js%22%2C%0A%20%20%20%20%20%20%22jest.config.js%22%0A%20%20%20%20%5D%0A%20%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Ejest.config.js%20%E3%82%82%E4%BB%A5%E4%B8%8B%E3%81%AE%E5%86%85%E5%AE%B9%E3%81%A7%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Emodule.exports%20%3D%20%7B%0A%20%20%20%20preset%3A%20'react-native'%2C%0A%20%20%20%20moduleFileExtensions%3A%20%5B'ts'%2C%20'tsx'%2C%20'js'%2C%20'jsx'%2C%20'json'%2C%20'node'%5D%2C%0A%7D%3B%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%E6%9C%80%E5%BE%8C%E3%81%AB%E3%80%81App.js%20%E3%81%A8%20index.js%20%E3%82%92%20App.tsx%20%E3%81%A8%20index.tsx%20%E3%81%AB%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%E3%81%9D%E3%81%86%E3%81%99%E3%82%8B%E3%81%A8%20App.tsx%20%E3%81%A7%20Cannot%20find%20name%20'global'%20%E3%81%A8%E3%81%84%E3%81%86%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9A%E3%81%AA%E3%81%84%E3%82%82%E3%81%AE%E3%81%AF%E4%BD%9C%E3%82%8C%E3%81%B0%E3%81%84%E3%81%84%E3%81%AE%E3%81%A7%E3%80%81%E4%BB%A5%E4%B8%8B%E3%81%AE%E5%AE%9A%E7%BE%A9%E3%82%92%20App.tsx%20%E3%81%AE%20import%20%E6%96%87%E3%81%AE%E4%B8%8B%E3%81%82%E3%81%9F%E3%82%8A%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%99%E3%80%82(%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%9F%20Issue%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Ffacebook%2Freact-native%2Fissues%2F26598%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Ffacebook%2Freact-native%2Fissues%2F26598%3C%2FA%3E)%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Edeclare%20var%20global%3A%20%7BHermesInternal%3A%20null%20%7C%20%7B%7D%7D%3B%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CBR%20%2F%3E%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E5%87%BA%E6%9D%A5%E3%81%9F%E3%82%89%E5%86%8D%E3%81%B3%20F5%20%E3%82%92%E6%8A%BC%E3%81%97%E3%81%A6%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%99%E3%80%82%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%9F%E3%82%89%E6%88%90%E5%8A%9F%E3%81%A7%E3%81%99%EF%BC%81%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164695i61BE6F7121EF25A3%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22clipboard_image_0.png%22%20title%3D%22clipboard_image_0.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId--736399142%22%20id%3D%22toc-hId--736399142%22%3E%E8%A3%9C%E5%AE%8C%E3%82%92%E4%BD%93%E9%A8%93%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%3C%2FH2%3E%0A%3CP%3EApp.tsx%20%E3%82%92%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%2F**%0A%20*%20Sample%20React%20Native%20App%0A%20*%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Ffacebook%2Freact-native%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Ffacebook%2Freact-native%3C%2FA%3E%0A%20*%0A%20*%20%40format%0A%20*%20%40flow%0A%20*%2F%0A%0Aimport%20React%2C%20%7BFragment%2C%20useState%7D%20from%20'react'%3B%0Aimport%20%7B%0A%20%20SafeAreaView%2C%0A%20%20StyleSheet%2C%0A%20%20ScrollView%2C%0A%20%20View%2C%0A%20%20Text%2C%0A%20%20StatusBar%2C%0A%20%20Button%2C%0A%7D%20from%20'react-native'%3B%0A%0Aimport%20%7B%0A%20%20Header%2C%0A%20%20LearnMoreLinks%2C%0A%20%20Colors%2C%0A%20%20DebugInstructions%2C%0A%20%20ReloadInstructions%2C%0A%7D%20from%20'react-native%2FLibraries%2FNewAppScreen'%3B%0A%0Adeclare%20var%20global%3A%20%7BHermesInternal%3A%20null%20%7C%20%7B%7D%7D%3B%0A%0Aconst%20App%20%3D%20()%20%3D%26gt%3B%20%7B%0A%20%20const%20%5Bcount%2C%20setCount%5D%20%3D%20useState(0)%3B%0A%20%20return%20(%0A%20%20%20%20%3CFRAGMENT%3E%0A%20%20%20%20%20%20%3CSTATUSBAR%20barstyle%3D%22dark-content%22%3E%3C%2FSTATUSBAR%3E%0A%20%20%20%20%20%20%3CSAFEAREAVIEW%3E%0A%20%20%20%20%20%20%20%20%3CSCROLLVIEW%20contentinsetadjustmentbehavior%3D%22automatic%22%20style%3D%22%7Bstyles.scrollView%7D%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3CHEADER%3E%3C%2FHEADER%3E%0A%20%20%20%20%20%20%20%20%20%20%3CVIEW%20style%3D%22%7Bstyles.body%7D%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CTEXT%20style%3D%22%7Bstyles.sectionTitle%7D%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20The%20counter%20value%20is%20%7Bcount%7D.%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FTEXT%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CBUTTON%20onpress%3D%22%7B()%22%3E%20setCount(count%20%2B%201)%7D%20title%3D%22Increment%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%3C%2FBUTTON%3E%3C%2FVIEW%3E%0A%20%20%20%20%20%20%20%20%3C%2FSCROLLVIEW%3E%0A%20%20%20%20%20%20%3C%2FSAFEAREAVIEW%3E%0A%20%20%20%20%3C%2FFRAGMENT%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20scrollView%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20Colors.lighter%2C%0A%20%20%7D%2C%0A%20%20engine%3A%20%7B%0A%20%20%20%20position%3A%20'absolute'%2C%0A%20%20%20%20right%3A%200%2C%0A%20%20%7D%2C%0A%20%20body%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20Colors.white%2C%0A%20%20%7D%2C%0A%20%20sectionContainer%3A%20%7B%0A%20%20%20%20marginTop%3A%2032%2C%0A%20%20%20%20paddingHorizontal%3A%2024%2C%0A%20%20%7D%2C%0A%20%20sectionTitle%3A%20%7B%0A%20%20%20%20fontSize%3A%2024%2C%0A%20%20%20%20fontWeight%3A%20'600'%2C%0A%20%20%20%20color%3A%20Colors.black%2C%0A%20%20%7D%2C%0A%20%20sectionDescription%3A%20%7B%0A%20%20%20%20marginTop%3A%208%2C%0A%20%20%20%20fontSize%3A%2018%2C%0A%20%20%20%20fontWeight%3A%20'400'%2C%0A%20%20%20%20color%3A%20Colors.dark%2C%0A%20%20%7D%2C%0A%20%20highlight%3A%20%7B%0A%20%20%20%20fontWeight%3A%20'700'%2C%0A%20%20%7D%2C%0A%20%20footer%3A%20%7B%0A%20%20%20%20color%3A%20Colors.dark%2C%0A%20%20%20%20fontSize%3A%2012%2C%0A%20%20%20%20fontWeight%3A%20'600'%2C%0A%20%20%20%20padding%3A%204%2C%0A%20%20%20%20paddingRight%3A%2012%2C%0A%20%20%20%20textAlign%3A%20'right'%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%84%E3%81%A6%E3%81%84%E3%82%8B%E9%80%94%E4%B8%AD%E3%81%AB%E3%81%A1%E3%82%83%E3%82%93%E3%81%A8%E8%A3%9C%E5%AE%8C%E3%81%8C%E3%81%8D%E3%81%8F%E3%81%93%E3%81%A8%E3%81%8C%E4%BD%93%E9%A8%93%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%81%AD%EF%BC%81%EF%BC%88JS%20%E3%81%A7%E3%82%82%E5%87%BA%E3%82%8B%E3%82%93%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%81%91%E3%81%A9%EF%BC%89%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164697iC162A5AE62960288%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_1.png%22%20title%3D%22clipboard_image_1.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%E3%81%86%E3%81%BE%E3%81%8F%E3%81%84%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%80%81%E3%82%A2%E3%83%97%E3%83%AA%E3%81%8C%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E3%81%AB%E6%9B%B8%E3%81%8D%E6%8F%9B%E3%82%8F%E3%81%A3%E3%81%A6%E3%81%84%E3%81%A6%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E5%8B%95%E3%81%8F%E3%81%AF%E3%81%9A%E3%81%A7%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164698i9281710A20A4A8E7%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22rn4w.gif%22%20title%3D%22rn4w.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-1751113691%22%20id%3D%22toc-hId-1751113691%22%3E%E3%81%BE%E3%81%A8%E3%82%81%3C%2FH2%3E%0A%3CP%3E%E8%BB%BD%E3%81%8F%20React%20Native%20for%20Windows%20%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%81%9F%E3%81%8C%E3%80%81%E7%92%B0%E5%A2%83%E3%81%95%E3%81%88%E6%95%B4%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8C%E3%81%B0%E6%84%8F%E5%A4%96%E3%81%A8%E7%B0%A1%E5%8D%98%E3%81%AB%E5%8B%95%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%E5%90%8C%E5%83%9A%E3%81%AE%20Matteo%20%E3%81%8C%E6%9C%80%E8%BF%91%E4%BB%A5%E4%B8%8B%E3%81%AE%20React%20Native%20for%20Windows%20%E7%B3%BB%E3%81%AE%E8%A8%98%E4%BA%8B%E3%82%92%E6%9B%B8%E3%81%84%E3%81%A6%E3%82%8B%E3%81%AE%E3%81%A7%E8%88%88%E5%91%B3%E3%81%8C%E3%81%82%E3%81%A3%E3%81%9F%E3%82%89%E6%98%AF%E9%9D%9E%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%97%E3%81%A6%E3%81%BF%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fwindows-dev-appconsult%2Fgetting-started-with-react-native-for-windows%2Fba-p%2F912093%22%20target%3D%22_self%22%3EGetting%20started%20with%20React%20Native%20for%20Windows%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fwindows-dev-appconsult%2Fbuilding-a-react-native-module-for-windows%2Fba-p%2F1067893%22%20target%3D%22_self%22%3EBuilding%20a%20React%20Native%20module%20for%20Windows%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fwindows-dev-appconsult%2Fcreate-a-ci-cd-pipeline-for-a-react-native-for-windows%2Fba-p%2F1083253%22%20target%3D%22_self%22%3ECreate%20a%20CI%2FCD%20pipeline%20for%20a%20React%20Native%20for%20Windows%20application%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fwindows-dev-appconsult%2Freact-native-for-windows-and-native-modules-how-to-add-ci-cd-to%2Fba-p%2F1085473%22%20target%3D%22_self%22%3EReact%20Native%20for%20Windows%20and%20native%20modules%3A%20how%20to%20add%20CI%2FCD%20to%20your%20project%3C%2FA%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%E3%81%9D%E3%82%8C%E3%81%A7%E3%81%AF%EF%BC%81%3C%2FP%3E%0A%3CP%3E%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%83%BC%E3%81%AB%E4%B8%8A%E3%81%92%E3%81%A6%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Frunceel%2FHelloRN4W%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Frunceel%2FHelloRN4W%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Microsoft

React Native for Windows を試してみたので備忘録もかねて手順をメモしてみました。

作業開始時点の私の環境は以下のようになります。

  • Windows 10 Pro 1909 (設定アプリから開発者モードに変更してください)
  • Visual Studio 2019 16.4.2
    • ユニバーサル Windows プラットフォームワークロードの C++(v141) ユニバーサル Windows プラットフォーム ツール。デフォルトでチェックが入っていないので入れる。142 じゃなくて 141 なので注意
    • 個別のコンポーネントから MSVC v141 - VS 2017 C++ ARM ビルドツール(v14.16)MSVC v141 - VS 2017 C++ x64/x86 ビルド ツール (v14/16) の 2 つを入れる
  • Node.js v12.9.1 (注意:現時点で最新の v12.14.1 を使うとビルド時にエラーになりました)
  • yarn 1.21.1

まず、セットアップを以下のページに従ってやってみましょう。

https://github.com/microsoft/react-native-windows/blob/master/vnext/docs/ConsumingRNW.md

プロジェクトを作る

npm install -g react-native-cli を実行して入れます。今日時点では react-native-cli@2.0.1 が入りました。

このコマンドを使って React Native のプロジェクトを作ります。任意のフォルダーで以下のコマンドを実行します。

 

 

react-native init ReactNativeHelloWorld --version 0.60.6

 

 


初回実行は各種パッケージのダウンロードなどが走るので時間がかかりますがコーヒーでも飲んで待ちましょう。次に、ここに React Native for Windows を入れます。ここで入れる React Native for Windows は vnext と言われる C++ で実装されたパフォーマンスのいい方になります。yarn (もしくは npm)で入れることが出来ます。

私は yarn なので、以下のコマンドで入れて React Native for Windows 関連のファイルを生成しました。

 

 

yarn add rnpm-plugin-windows
react-native windows --template vnext

 

 


何か新バージョンの metro.config.js に置き換えるか?と聞かれたので y を選択して更新しました。

 

 

Do you want to keep your metro.config.js or replace it with the latest version?
If you ever made any changes to this file, you'll probably want to keep it.
You can see the new version here: C:\Users\k_ota\Documents\Repos\runceel\ReactNativeHelloWorld\node_modules\react-native-windows\local-cli\generator-windows\templates\metro.config.js
Do you want to replace metro.config.js? Answer y to replace, n to keep your version:
y

 

 

 

windows フォルダーがプロジェクト直下に生成されて、その中にソリューションファイルがあります。

clipboard_image_0.png

これを開いて実行することも出来ますが、今回は Visual Studio Code で試してみたいと思います。

Visual Studio Code を管理者として実行します。(ドキュメント上には記載はないのですが、管理者モードで実行しないと私の作業環境では、アプリのインストールに失敗しています。)Visual Studio Code で ReactNativeHelloWorld フォルダーを開きます。Visual Studio Code に React Native Tools をインストールしていない場合はインストールします。

 

Visual Studio Code の launch.json を以下のようにして F5 を押してみましょう。

 

 

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Windows",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "windows"
        }
    ]
}

 

 

 

初回起動は凄く時間がかかるのでコーヒーでも飲んで時間をつぶしましょう。ビルドの進捗は Visual Studio Code の Output から React native: Run windows で確認できます。

clipboard_image_0.png

暫くすると、以下のように Window が起動してきます。

clipboard_image_1.png

 

型が欲しい

TypeScript 対応してみましょう。既存のプロジェクトに TypeScript サポートを追加する手順が以下のドキュメントにあります。

https://facebook.github.io/react-native/docs/typescript#adding-typescript-to-an-existing-project

この手順に沿って、以下のコマンドを実行していきます。

 

 

yarn add typescript @types/jest @types/react @types/react-native @types/react-test-renderer

 

 


そして、tsconfig.json を以下の内容で作成します。一部ドキュメントと変えているのがテンプレートでは json ファイルを import しているので、それに対応するため resolveJsonModule を true にしています。

 

 

{
    "compilerOptions": {
      "allowJs": true,
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "isolatedModules": true,
      "jsx": "react",
      "lib": ["es6"],
      "moduleResolution": "node",
      "noEmit": true,
      "strict": true,
      "target": "esnext",
      "resolveJsonModule": true
    },
    "exclude": [
      "node_modules",
      "babel.config.js",
      "metro.config.js",
      "jest.config.js"
    ]
  }

 

 

 

jest.config.js も以下の内容で追加します。

 

 

module.exports = {
    preset: 'react-native',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

 

 

 

最後に、App.js と index.js を App.tsx と index.tsx にします。そうすると App.tsx で Cannot find name 'global' というエラーになります。とりあえずないものは作ればいいので、以下の定義を App.tsx の import 文の下あたりに追加します。(参考にした Issue: https://github.com/facebook/react-native/issues/26598)

 

 

declare var global: {HermesInternal: null | {}};

 

 


ここまで出来たら再び F5 を押して実行してみます。以下のように表示されたら成功です!

clipboard_image_0.png

 

補完を体験してみよう

App.tsx を以下のように変更してみましょう。

 

 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Fragment, useState} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Button,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

declare var global: {HermesInternal: null | {}};

const App = () => {
  const [count, setCount] = useState(0);
  return (
    <Fragment>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          <View style={styles.body}>
            <Text style={styles.sectionTitle}>
              The counter value is {count}.
            </Text>
            <Button onPress={() => setCount(count + 1)} title="Increment" />
          </View>
        </ScrollView>
      </SafeAreaView>
    </Fragment>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

 

 

 

コードを書いている途中にちゃんと補完がきくことが体験できますね!(JS でも出るんでしょうけど)

clipboard_image_1.png

うまくいっていると、アプリがリアルタイムに書き換わっていて以下のように動くはずです。

rn4w.gif

まとめ

軽く React Native for Windows を試してみましたが、環境さえ整っていれば意外と簡単に動きました。同僚の Matteo が最近以下の React Native for Windows 系の記事を書いてるので興味があったら是非チェックしてみてください。

それでは!

ソースコードは以下のリポジトリーに上げてます。

https://github.com/runceel/HelloRN4W