反応のネイティブ絵スライダー

✅ ゴール


🏗 プロセス
次のNPMパッケージをインストールします😢

yarn add @react-native-community/slider

スライダコンポーネントを追加しましょう!

<View style={styles.container}>
        <Slider
    />    
</View>

小道具なしでは、部品は正しく見えません..これは、画面上のドットです.

スタイルプロップをいくつかの幅と高さを与えるために加えることによって、それを修正します

<View style={styles.container}>
      <Slider
        style={{width: 200, height: 40}}
      />        
</View>

今、我々は話している!だから我々は、ユーザーが様々なポイントにスライダをスライドさせ、それらに示されている絵文字を変更することができる評価をしたい.このミニチュートリアルのために、5つの異なるEmojisを選ぶことができます.だから我々は設定したいminimumValue をmaximumValue である.また、設定したいstep プロップする1 意味は、我々は1つのポイントを“ステップ”になるスライダを移動するたびに.

<View style={styles.container}>
        <Slider
        style={{width: 200, height: 40}}
        minimumValue={1}
        maximumValue={5}
        step={1}
    />  
</View>

次は設定しますonValueChange スライダの値が変わるたびに呼び出される関数を受け取るprop.これは反応を使いましょうuseState フックは、我々の機能コンポーネントの状態を維持することができます.反応フックの詳細情報のためにチェックアウトthe documentation .

export default function App() {

  const [rating, setRating] = React.useState(3);

  return (
    <View style={styles.container}>
      <Slider
        style={{width: 200, height: 40}}
        minimumValue={1}
        maximumValue={5}
        step={1}
        onValueChange={setRating}
      />  
    </View>
  );
}

それはスライダーのためにそれでなければなりません.我々はそれをスライドさせ、我々のコンポーネントの状態に返される値を保存することができます.これは、ユーザーに表示される絵文字を変更する方法です.セットアップしましょう.それは単に簡単になります<Text> コンポーネントを変更し、フォントサイズを大きくします.

export default function App() {

  const [rating, setRating] = React.useState(3); // 3 is the default value

  return (
    <View style={styles.container}>
      <Slider
        style={{width: 200, height: 40}}
        minimumValue={1}
        maximumValue={5}
        step={1}
        onValueChange={setRating}
      />  
      <Text style={{ fontSize: 50 }}>
        😐
      </Text>
    </View>
  );
}

したがって、この絵文字を変更するためには、コンポーネントがレンダリングされるたびに、関数が呼び出されるようになりますsetRating フック.

const getRatingEmoji = () => {
    if (rating === 1){ return '😡' }

    if (rating === 2) { return '😫' } 

    if (rating === 3) { return '😶' } 

    if (rating === 4)  { return '🙂' } 

    if (rating === 5) { return '😁' } 
  }

この関数は非常に簡単です、そして、評価が特定の数に等しいならば、単にチェックしてください、そして、それがその数と一致する適当な絵文字を返すならば.最後に、私たちがしなければならないことは、<Text> コンポーネント.

export default function App() {

  const [rating, setRating] = React.useState(3);

  const getRatingEmoji = () => {
    if (rating === 1){ return '😡' }

    if (rating === 2) { return '😫' } 

    if (rating === 3) { return '😶' } 

    if (rating === 4)  { return '🙂' } 

    if (rating === 5) { return '😁' } 
  }

  return (
    <View style={styles.container}>
      <Slider
        style={{width: 200, height: 40}}
        minimumValue={1}
        maximumValue={5}
        step={1}
        onValueChange={setRating}
      />  
      <Text style={{ fontSize: 50 }}>
        {getRatingEmoji()}
      </Text>
    </View>
  );
}

💥 最終結果
ここのフルワーキングコードのチェックRepo
より多くのために私に続いてください!