React Nativeの一ヶ月間のノートを勉強します.

2016年7月React Nativeジャンプピット記録
1.コンポーネント属性を追加するには、class属性はclassNameと書く必要があり、for属性はhtmlForと書く必要があります.これはclassとforはJavaScriptの保留文字です.
2.ゲニモでシミュレーションを行う場合は、必ずパソコンのファイアウォールを閉じ、携帯電話のWi-Fiを接続する(5.0以上のバージョンは自動的にwifiに接続されないようです).シミュレータのipとポートを本機にアクセスできるip(10.0.3.2:8081)に設定します.携帯電話であれば、ウェブサイトを開けてアクセスできるかどうか試してみてもいいです.訪問してからgnymotionの設定にipを追加することができます.
3.React Nativeの包装器はまずFile..jsファイルを探してからFile.jsを探します.これにより、AndroidプラットフォームのコードをFile.android.js、iOSのFile.ios.js、およびWebプラットフォームのコードをFile.jsに入れることができ、導入された声明を変更する必要がない.
4.ES 6では変数のデスティネーションが多く使われていますが、変数の値を交換するにはこの奇妙な方法[x,y]=[y,x]が使えます.
5.Imageがネットワーク画像を読み込むとき、Imageにwidthとheightを設定しないと、何も見えなくなります.これはまだ計算されていません.ListViewを使用すると、兄弟要素が同時に存在する場合、ListViewはheightを設定しなければなりません.そうでなければ、ユーザのスクロール操作に応答しないことが分かります.ここでいうwidthとheightとは、スタイル属性に設定された値であり、そのままheight属性を設定しても機能しません.
6.fetchを使う時、添付フォームのデータを提出しようとする時は、必ずFormDataオブジェクトを使ってデータを小包してください.もしあなたが普通のjsonだけ提出したら、公式の例に従ってください.

fetch(API_LOGIN_URL, { 
  method: 'POST', 
  headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json', 
  }, 
  body: JSON.stringify({ 
     account: this.state.account, 
    password: this.state.password
  }) 
});

7.FBは、画面の現在のサイズを取得するためにDimensionsコンポーネントを提供する.

var deviceHeight = Dimensions.get('window').height;
var deviceWidth = Dimensions.get('window').width;

8.設定されたスタイルをコントロールにあてはめるつもりですが、個別に特別な値を設定する必要があります.
9.つまり View>要素がTextの中にあれば、inline要素として考えられ、単独でViewの中にあれば、Blockです.
10.私はViewをText、justifyContent: 'center'の様式を設定して、中にView Pager Androidを置いています.この時彼に固定の幅を設定しないと、或いはpaddingを使って彼を開けないと見えないです.おそらくViewのstyleに設定されてinlineのような属性になっています.
11.ViewコンポーネントだけがalignItems: 'center'属性を設定した後、自分のborderを一斉に円角に変換します.他の要素は例えばImageとTouchable類のように何の反応もなく、角は四角です.
12.もし突然現れたら、画像を表示しない場合、彼に枠を追加してもいいです.資源が見つからないか、それともレイアウトが間違っているかを確認できます.意外な発見は、border Widthを0に設定するだけで、写真を表示することができます.(改:大きな写真は時々見せないので、気まずいです)
13.react-native-swiperのポイントのパターンを設定する時、関数の戻り値が入力できません.直接にElementオブジェクトに入る必要があります.どこが間違っているのか分かりません.

class Dot extends Component{ 
  render(){ 
    return( 
      
     ); 
  }
}

Dot.render()システムに入ったら、エラーが発生します.ヒントは空の要素ですが、Viewに直接入ったら成功できます.
14.RNにおける要素のデフォルトの位置決め方式はrelativeであり、relativeとabsoluteの二つの位置決め方式のみである.コンポーネントにposition:absoluteを加えると、inlineでページに描画されます.そして、通常の文書フローから逸脱します.つまり視覚的には後ろのコンポーネントで覆われますが、zIndex方式で調整することはできません.ネストされたTextは利用できません.
15.コントロールにstyle属性を書く時、できるだけ一つのViewで包んでください.多くのコントロールのスタイルが使えないので、デバッグ時間を無駄にします.
16.デバッグコードの場合、常にthisの指向に注意してください.例えば、次の例では、consolie.logのthisはDrawerを指しています.彼のthisを呼び出します.render NavigationView`毒があります.彼は入ってきた関数の方法を呼び出して、中のthisの針を強引に自分に指します.

class main extends Component{ 
  navigationView(){ 
    console.log(this); 
  } 
  render(){ 
    return( 
              ............. 
             ); 
  }
}

17.絵の下に文字を置いても、絵の幅だけが設定されていると、絵の下に文字がくっつかないという問題があります.この場合はheightを設定すればいいです.

18.borderRadiusは、現在のプラットフォームの最も細い幅を定義するために使用される.この属性は、外枠または2つのコンポーネント間の分割線を設定します.hairlineWidth:CallExpressionは、現在のプラットフォーム情報に基づいて、自動的に細い線に変換されます.
19.押収したこの記事「React Nativeタッチ事件処理詳細」のジェスチャー処理について、とても役に立ちます!!!!!!!
今はRNの小さいプロジェクトをしています.Bilibiliの最新アプリを真似して、初心者向けに理解してください.皆さん、見てください.ついでにスターを注文してください.
React-Native-Bilibiliピリ(￣▽￣)～■乾杯□(￣▽￣)