Pickerが表示できない時に確認すること（メモ）

目的

• Expo アプリでセレクトボックス（Picker）を設置する
  • 設置したのに表示されない
  • Pickerが操作できない。等の問題を解決する

記事の意図

• ExpoのPickerライブラリを設置する非常に簡単な操作ではあるが、ちょっとわかりにくい初歩的なミスで思うように設置できなかった
• 同様の問題に当たった人がすぐに解決できるように記事化する
• 初歩的すぎて記事化を躊躇したが、今後ハマる人（自分も含めて）の時間を節約するため、残すことにした

環境

• Expo 4.10.1
• 使用する Picker @react-native-picker/picker

設置と失敗

導入手順 Pickerの導入方法

• ライブラリの読み込みとコンポーネントの設置

import {Picker} from '@react-native-picker/picker';

// ===省略
render() {
 return(
 <Picker
  style={スタイルを設定}
  selectedValue="初期値"
  onValueChange={(itemValue, itemIndex) =>
   console.log("選択で実行")
  }>
  <Picker.Item label="test1" value="test1" />
  <Picker.Item label="test2" value="test2" />
 </Picker>
 )
}

失敗と原因

Pickerが画面に表示されない

• 事象：Pickerそのものが画面に表示されない
• 原因：スタイルを指定していない
• 対策：styleで縦幅、横幅を指定する

picker:{
    height: 100,
    width: SCREEN_WIDTH
  },

Pickerが動かない

• 事象：Pickerは表示されているが、ドラッグしても反応がない
• 原因：別のコンポーネントが上に重なっている
  • たとえば次の画面では、Inputのラベル要素がPickerに干渉してしまい、Pickerの操作ができない状態となっていた

コンポーネント

<View style={styles.container}>
 <Text style={styles.name}>選択してください</Text>
 <Picker
  style={styles.picker}
  selectedValue="test"
  onValueChange={(itemValue, itemIndex) =>
  console.log("itemValue")
 }>
  <Picker.Item label="Java" value="test" />
  <Picker.Item label="JavaScript" value="test1" />
 </Picker>

  <Input label="そのた" style={styles.input} 
    placeholder="自動で選択肢に追加されます" onChangeText= 
  {this.other}/>
</View>

• 対策:
  • Viewを分けてるなどで画面を整理し
  • styleでは同じレベルのflexを適切に設定し、重ならないように明記した

コンポーネント

<View style={styles.container}>
 <Text style={styles.name}>選択してください</Text>
 <Picker
  style={styles.picker}
  selectedValue="test"
  onValueChange={(itemValue, itemIndex) =>
  console.log("itemValue")
 }>
  <Picker.Item label="Java" value="test" />
  <Picker.Item label="JavaScript" value="test1" />
 </Picker>

 <View style={styles.inputForm} >
  <Input label="そのた" style={styles.input} 
    placeholder="自動で選択肢に追加されます" onChangeText= 
  {this.other}/>
 </View>
</View>

スタイル

  picker:{
    flex:3,
    height: 100,
    width: SCREEN_WIDTH
  },
  inputForm: {
    flex: 1,
    padding: 20,
    width: SCREEN_WIDTH,
    alignItems: 'center',
    backgroundColor: '#fff',
  },

ライブラリが古くないか確認

react-native のPickerは非推奨となっている。

https://reactnative.dev/docs/picker

Pickerを利用するときは @react-native-picker/picker を利用する

https://docs.expo.dev/versions/latest/sdk/picker/