https://wiki.nekotype.com/ 2026-04-30T22:27:44+0900 https://wiki.nekotype.com/ https://wiki.nekotype.com/lib/tpl/dokuwiki/images/favicon.ico text/html 2019-04-02T06:20:02+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/%E3%82%A8%E3%83%A9%E3%83%BC?rev=1554153602&do=diff エラー [Unhandled promise rejection: Error: The callback provided as parameter 1 is not a function.] コールバックでtxを参照していないためのエラー。 db.transaction(console.log("callback"), console.log("error"), console.log("success")) 　　　↓ db.transaction((tx)=>{console.log("callback")}, console.log("error"), console.log("success")) text/html 2019-02-11T12:45:06+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/%E3%82%B5%E3%82%A4%E3%82%BA%E5%8F%96%E5%BE%97?rev=1549856706&do=diff サイズ取得 画面サイズ取得 const Dimensions = require('Dimensions') const { width, height, scale } = Dimensions.get('window') [18:09:44] 411.42857142857144 //width [18:09:44] 683.4285714285714 //height [18:09:44] 2.625 //scale ヘッダーやステータスバー text/html 2019-01-30T07:05:09+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/%E3%83%87%E3%83%90%E3%83%83%E3%82%B0?rev=1548799509&do=diff デバッグ 開発者用メニューの表示はCTL+M　 ・expoでemulatorにアプリを実行させる。 ・その状態でemulator上でCTL+Mをおすと、メニューがでるので　Debug JS Remotelyを押す ・Launchiung Dev Tools ... text/html 2019-03-31T08:51:38+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/%E4%BD%BF%E7%94%A8%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89?rev=1553989898&do=diff 使用コマンド emulator 利用できるエミュレーター一覧 > emulator -list-avds to see valid list Nexus_5X_API_28 pixel エミュレーター起動 >emulator -avd pixel avdmanager 利用できるエミュレーター一覧（詳細） avdmanager list avd text/html 2019-05-15T00:59:17+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/build?rev=1557849557&do=diff bulid expoの場合 React NativeでiOS, Androidのストア公開のTips buildコマンド // 公開せずapkを作成するだけならこれでいける。 cd android // androidフォルダに移動 gradlew assembleRelease 　⇒ android/app/build/outputs/apk/app-release-unsigned.apk　ができる。 バージョン指定 text/html 2019-03-17T13:16:37+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/button_touchableopacity?rev=1552796197&do=diff Button / TouchableOpacity Buttonはほとんど何もカスタマイズできない。 スタイルを設定したければTouchableOpacityを使う必要がある。 'react-native'のButtonにはstyleプロパティがないので注意。 React-Native Button style not work Viewを使ってカスタマイズしているサンプル text/html 2019-02-11T19:38:02+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/flatlist?rev=1549881482&do=diff FlatList [React Native]FlatListのdataを変更しても画面が更新されない VirtualizedList: missing keys for items, make sure to specify a key property on each item or provide a custom keyExtractor., [17:19:16] VirtualizedList: missing keys for items, make sure to specify a key property on each item or provide a custom keyExtractor., - node_modules\expo\build\logs\LogSerialization.js:145:14 in _captureConsoleStackTrace - node_modules\expo\build\logs\LogSerialization.js:40:24 in Object.serializeLogDataAsync$ - ...… text/html 2019-02-02T00:39:57+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/import?rev=1549035597&do=diff import import {MyComponent} from '../components/xyz.js'; vs import MyComponent from '../components/xyz.js'; The second one works while the first caused the error. For anyone still wondering why this works - {MyComponent} imports the export 'MyComponent' from the file '../components/xyz.js' - The second imports the default export from '../components/xyz.js'. text/html 2019-03-05T01:09:53+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/jest?rev=1551715793&do=diff Jest ExpoでJestを使うには、との両方が必要。 jest-expo インストール npm i jest-expo --save-dev npm i jest package.json //package.jsonに追加 "scripts": { "test": "node_modules/.bin/jest" }, "jest": { "preset": "jest-expo", "testEnvironment": "node" //必須ではない。jsdomを無効にしてテストを早くする } text/html 2019-02-11T10:26:37+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/keyboardavoidingview?rev=1549848397&do=diff KeyboardAvoidingView ソフトウェアキーボードが表示されると画面を上に持ち上げて、キーボードにより入力しているテキストが隠れることを防止する。 基本 一番トップ階層に「KeyboardAvoidingView 」を持ってくる。 その内側のViewでは「justifyContent:'flex-end'」を設定するとうまく動作する。 画面の下から上に押し上げる動作のためと思われる。 text/html 2019-02-16T19:17:55+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/linking?rev=1550312275&do=diff Linking URLをブラウザで開けるようだ。 import {Linking} from 'react-native'; <Text style={{color: 'blue'}} onPress={() => Linking.openURL(url)}> URLを開く </Text> text/html 2019-04-30T11:55:14+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/native_module?rev=1556592914&do=diff native module react-nativeでAndroidのAPIを使う react-nativeでAndroidのAPIを扱う（Native Modules編） Native Modules voximplant/react-native-foreground-service １．ReactContextBaseJavaModuleを継承したクラスを作る * getNameをオーバーライドする。JSコードの中でNativeモジュールを呼ぶ時の識別子となる。 * text/html 2019-01-26T07:18:02+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/panresponder?rev=1548454682&do=diff panresponder clickアクション 　panResponderを使っってスワイプアクションを実装し、Animatedの内側(もしくは外側)にTouchableOpacityでクリックイベントを実装しようとした。 　しかし、panResponderの反応がよく、実機ではpanResponderの移動と判定されてクリックができない。 text/html 2019-01-26T07:17:52+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/react-native-action-button?rev=1548454672&do=diff react-native-action-button 右下にでるアクションボタン。 react-native-action-button 使い方 npm install react-native-action-button --save react-native link import ActionButton from 'react-native-action-button'; ・・・ render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Edit Screen</Text> <Button title="Go to Details... again2" onPress={() => this.props.navigation.push('Details')} /> … text/html 2019-03-22T12:47:34+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/react-native-background-timer?rev=1553226454&do=diff react-native-background-timer >npm install react-native-background-timer >react-native link warn Running `react-native link` without package name is deprecated and will be removed in next release. If you use this command to link your project assets, please let us know about your use case here: https://goo.gl/RKTeoc info Linking "react-native-background-timer" iOS dependency info iOS module "react-native-background-timer" has been successfully linked info Linking "react-native-background-timer… text/html 2019-04-03T04:56:47+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/react-native-geolocation-service?rev=1554235007&do=diff react-native-geolocation-service react-native-geolocation-service インストール手順 npm install react-native-geolocation-service android/app/build.gradleに追加 dependencies { implementation project(':react-native-maps') implementation ("com.google.android.gms:play-services-maps:+") { force = true; } implementation 'com.android.support:multidex:1.0.0' implementation project(':react-native-background-timer') implementation fileTree(dir: "libs", include: ["*.jar"]) i… text/html 2019-03-30T09:49:49+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/react-native-maps?rev=1553906989&do=diff react-native-maps React Native Location Tracking インストール npm install react-native-maps --save react-native link Google Maps Platform ドキュメント <https://developers.google.com/maps/documentation/> Get API Key <https://developers.google.com/maps/documentation/android-sdk/signup> Step 1. Get an API key Google Maps Platform の有効化 詳細はここ Step 2. Add the API key to your app text/html 2019-02-11T13:58:50+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/react-native-star-rating?rev=1549861130&do=diff react-native-star-rating 色々あるがこれが簡単に実装できた。 react-native-star-rating import StarRating from 'react-native-star-rating'; onStarRatingPress(rating) { let val = rating if (val === this.state.star){ val=0 } this.setState({ star: val }) } ・・・ <StarRating disabled={false} maxStars={3} rating={this.state.star} fullStarColor={'#ff9800'} selectedStar={(rating) => this.onStarRat… text/html 2019-02-10T17:02:10+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/react-native-swipeout?rev=1549785730&do=diff react-native-swipeout react-native-swipeout <FlatList data={this.state.data} execData={this.state.update} renderItem={({item}) => <Swipeout autoClose={true} sectionID={item.rowid} rowID={item.rowid} right={[{text:'DELETE',backgroundColor:'red', onPress:()=>this.swipeDelete(item.rowid)}]} onOpen={(sectionID, rowId, direction)=>this.swipeOpen(sectionID, … text/html 2019-03-08T06:20:36+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/react-navigation?rev=1551993636&do=diff react-navigation インストール npm install --save react-navigation イベント 下記イベントリスナーを追加したコンポーネントントは、フォーカス時やフォーカスを外れたときにイベントを実行できる。 navigationの「←」でもイベントは発生する。 text/html 2019-02-02T03:04:31+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/react-redux?rev=1549044271&do=diff react-redux >npm install react-redux SyntaxError: C:\Users\Ryu\react\expo-redux\App.js: Only one default export allowed per module. >npm install redux 1.stateを使った状態 import React from 'react'; import { StyleSheet, Text, View , TouchableOpacity ,Button ,TextInput} from 'react-native'; export default class App extends React.Component { constructor(props){ super(props) this.state = { count: 0, name:'hogehoge' }; } pressPlus(e){ this.setState({count:thi… text/html 2019-01-26T07:17:37+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/stacknavigator?rev=1548454657&do=diff stacknavigator 基本 スタックナビゲーターは文字通り、画面を積み重ねていくイメージの画面遷移をする。 戻るで一つ前の画面に戻ることができる。 npm install --save react-navigation App.js import React from 'react'; import { StyleSheet} from 'react-native'; import { createAppContainer, createStackNavigator } from 'react-navigation' import HomeScreen from './HomeScreen' import DetailsScreen from './DetailsScreen' import EditScreen from './EditScreen' export default class App extends React.Component { render() { return <AppContainer />; } } const… text/html 2019-01-31T06:09:04+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/state?rev=1548882544&do=diff state コンポーネント内での状態の保存に使用する。 propsはコンポーネント間での受け渡しに使用する。 reduxを使うと、propsから共通のstateを取得する。 基本 (現在のstate,props) => ({xxx:yyy}) //現在のsatteやpropsを使う場合 this.setState((prevState, props) => ({count: prevState.count + +1})) 　↓ //でもよい this.setState({count:this.state.count+1}) text/html 2019-03-30T14:35:35+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/style?rev=1553924135&do=diff style EDIT Layout with Flexbox ReactNativeで簡単なfetchからFlatList→onPressまでのサンプルプログラム（CRNA） React Nativeのデザイン - Stylesheet/Flexbox (part1) React Nativeのデザイン - Stylesheet/Flexbox (part2) 【React Native】よく使うスタイル実装まとめ【StyleSheet】 React Color widthやhight 数字でも%でも指定できる。%の場合は''が必要。 style={{flex:1,width:'100%',maxHeight:200,top:50}} flex flex:1を親に追加すると、親は全体に広がります 子にもつけると、つけた数字の割合で親の中で広がります… text/html 2019-02-11T11:34:13+0900 Anonymous (anonymous@undisclosed.example.com) https://wiki.nekotype.com/reactnative/textinput?rev=1549852453&do=diff TextInput TextInput textAlignVertical(入力開始位置) textAlignVertical:'top' numberOfLines(行数) hightを設定したら機能しない。 初期表示されるhightが変わるだけで、行数を制限するわけではない。 改行すればどんどん入力スペースは下に拡張していく。