React Nativeの属性確認用prop-typesの詳細説明-jsチュートリアル-php.cn

React Nativeの属性確認用prop-typesの詳細説明

小云云

リリース： 2018-05-14 13:57:31

オリジナル

2178 人が閲覧しました

この記事ではReact Nativeにおけるprop-typesを使ったプロパティ確認の詳細な解説を中心に紹介していますが、編集者が非常に良い内容だと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

属性確認の役割

React Nativeで作成したコンポーネントは再利用できるため、開発したコンポーネントをプロジェクトチームの他の仲間が利用する可能性があります。ただし、他の人はこのコンポーネントに慣れていない可能性があり、特定のプロパティの使用を忘れたり、一部のプロパティによって渡されるデータ型が正しくなかったりすることがよくあります。

そのため、React Native カスタムコンポーネントを開発するときは、属性確認を使用してコンポーネントに必要な属性を宣言できます。このようにして、このカスタムコンポーネントを呼び出すときに対応する属性が指定されていない場合、携帯電話とデバッグツールに警告メッセージがポップアップ表示され、コンポーネントに必要な属性が開発者に通知されます。

React Native は 0.51.0 にアップグレードされました。バージョンのアップグレードは非常に高速ですが、古いプロジェクトにはいくつかの問題もあります。最も一般的な問題は、属性が見つからないことです。例:

React Nativeの属性確認用prop-typesの詳細説明

主な理由は、React Native のアップグレードにより、システムが多くのことを放棄したことです。以前はプロパティの確認に React.PropTypes を直接使用できましたが、これは削除されて以来です。 React v15.5 では、代わりに prop-types ライブラリを使用して置き換えます

プロパティ確認

プロパティ確認の役割

React Native で作成したコンポーネントは再利用できるため、開発したコンポーネントは他のコンポーネントでも使用できますプロジェクトチーム同僚が使用します。ただし、他の人はこのコンポーネントに慣れていない可能性があり、特定のプロパティの使用を忘れたり、一部のプロパティによって渡されるデータ型が正しくなかったりすることがよくあります。したがって、React Native カスタムコンポーネントを開発するときは、プロパティの確認を通じてコンポーネントに必要なプロパティを宣言できます。

注: React Native コードが効率的に実行されることを保証するために、属性の確認は開発環境でのみ有効であり、正式にリリースされたアプリの実行時にはチェックされません。

prop-types ライブラリの使用方法

prop-types をインストールするには、まずプロジェクトのルートディレクトリに入り、次のコードを実行して prop-types ライブラリをインストールします。

npm install --save prop-types

ログイン後にコピー

その後、PropTypes 属性を使用する必要がある場合ローカルの導入:

import PropTypes from &#39;prop-types&#39;;

ログイン後にコピー

Example

たとえば、ナビゲーションバーの例を作成すると、その効果は次のようになります:

React Nativeの属性確認用prop-typesの詳細説明

import React, {
 Component
} from 'react'
import {
 StyleSheet,
 View,
 Animated,
 Image,
 TouchableOpacity,
 TouchableNativeFeedback,
 Platform
} from 'react-native'
import px2dp from '../utils/Utils'
import Icon from 'react-native-vector-icons/Ionicons'
import PropTypes from &#39;prop-types&#39;;

export default class NavBar extends Component{

 static propTypes = {
  title: PropTypes.string,
  leftIcon: PropTypes.string,
  rightIcon: PropTypes.string,
  leftPress: PropTypes.func,
  rightPress: PropTypes.func,
  style: PropTypes.object
 }
 static topbarHeight = (Platform.OS === 'ios' ? 64 : 44)
 renderBtn(pos){
  let render = (obj) => {
  const { name, onPress } = obj
  if(Platform.OS === 'android'){
   return (
   
    
   
   )
  }else{
   return (
   
    
   
   )
  }
  }
  if(pos == "left"){
  if(this.props.leftIcon){
   return render({
   name: this.props.leftIcon,
   onPress: this.props.leftPress
   })
  }else{
   // return ()
   return ()
  }
  }else if(pos == "right"){
  if(this.props.rightIcon){
   return render({
   name: this.props.rightIcon,
   onPress: this.props.rightPress
   })
  }else{
   return ()
  }
  }
 }
 render(){
  return(
   
    {this.renderBtn("left")}
    {this.props.title}
    {this.renderBtn("right")}
   
  )
 }
}
const styles = StyleSheet.create({
 topbar: {
  height: NavBar.topbarHeight,
  backgroundColor: "#06C1AE",
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
  paddingTop: (Platform.OS === 'ios') ? 20 : 0,
  paddingHorizontal: px2dp(10)
 },
 btn: {
  width: 22,
  height: 22,
  justifyContent: 'center',
  alignItems: 'center'
 },
 title:{
  color: "#fff",
  fontWeight: "bold",
  fontSize: px2dp(16),
  marginLeft: px2dp(5),
 }
});

ログイン後にコピー

Syntax

1 の場合、必須属性は指定された JavaScript 基本タイプです。例:

プロパティ: PropTypes.array、
プロパティ: PropTypes.bool、
プロパティ: PropTypes.func、
プロパティ: PropTypes.number、
プロパティ: PropTypes.object、
プロパティ: PropTypes.string、

2 , アトリビュートがレンダリング可能なノードである必要があります。例:

Attribute: PropTypes.node,

3、必須の属性は特定の React 要素です。例:

Property: PropTypes.element,

4。これは、属性が指定されたクラスのインスタンスである必要があります。例:

Attributes: PropTypes.instanceOf(NameOfAClass)、

5、これは属性値が特定の値である必要があります。例:

Attribute: PropTypes.oneOf(['value1', 'value2']),