web-dev-qa-db-ja.com

React NativeのPickerコンポーネントをスタイルし、高さを小さくする方法はありますか？

ReactネイティブアプリケーションでPickerコンポーネントを使用したかったのですが、画面の高さが大きすぎます。たとえば、一度に2つのアイテムのみを表示し、その中でスクロールできるように、ピッカー自体を制限する方法はありますか？

javascriptreact-nativestylespicker
17
nbkhope

スタイルをいじってみると、最も重要な部分はitemStyle propを設定し、そこでheight値を定義することです。また、おそらくPickerコンポーネント自体のスタイルを設定し、height値を最高の結果を得るために同じ値に設定することもできますが、そうしないneedそのために。

2行の表示の試行について：

  • 1つのアイテムを表示すると、約44の高さになります。
  • ネイティブのPickerコンポーネントがどのように設計されているかにより、iOSで正確に2つのアイテムを実際に表示することはできません。現在選択されている値の上下の部分が表示されます。そのため、せいぜいこれらの値の半分/半分を表示することができます。自分に合った何かを見つけるには、高さをいじる必要があります。

最小限の例：

<Picker style={{width: 200, height: 44}} itemStyle={{height: 44}}>
  <Picker.Item label="Java" value="Java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

スナック は、さまざまな高さの完全な例を示しています（以下にコードコピーを貼り付けます）。

import React, { Component } from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      language: 'haxe',
      firstLanguage: 'Java',
      secondLanguage: 'js',
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Unstyled:</Text>
        <Picker
          style={[styles.picker]} itemStyle={styles.pickerItem}
          selectedValue={this.state.language}
          onValueChange={(itemValue) => this.setState({language: itemValue})}
        >
          <Picker.Item label="Java" value="Java" />
          <Picker.Item label="JavaScript" value="js" />
          <Picker.Item label="Python" value="python" />
          <Picker.Item label="Haxe" value="haxe" />
        </Picker>

        <Text style={styles.title}>Shows one row:</Text>
        <Picker
          style={[styles.onePicker]} itemStyle={styles.onePickerItem}
          selectedValue={this.state.firstLanguage}
          onValueChange={(itemValue) => this.setState({firstLanguage: itemValue})}
        >
          <Picker.Item label="Java" value="Java" />
          <Picker.Item label="JavaScript" value="js" />
          <Picker.Item label="Python" value="python" />
          <Picker.Item label="Haxe" value="haxe" />
        </Picker>

        <Text style={styles.title}>Shows above and below values:</Text>
        <Picker
          style={[styles.twoPickers]} itemStyle={styles.twoPickerItems}
          selectedValue={this.state.secondLanguage}
          onValueChange={(itemValue) => this.setState({secondLanguage: itemValue})}
        >
          <Picker.Item label="Java" value="Java" />
          <Picker.Item label="JavaScript" value="js" />
          <Picker.Item label="Python" value="python" />
          <Picker.Item label="Haxe" value="haxe" />
        </Picker>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    padding: 20,
    backgroundColor: 'white',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginTop: 20,
    marginBottom: 10,
  },
  picker: {
    width: 200,
    backgroundColor: '#FFF0E0',
    borderColor: 'black',
    borderWidth: 1,
  },
  pickerItem: {
    color: 'red'
  },
  onePicker: {
    width: 200,
    height: 44,
    backgroundColor: '#FFF0E0',
    borderColor: 'black',
    borderWidth: 1,
  },
  onePickerItem: {
    height: 44,
    color: 'red'
  },
  twoPickers: {
    width: 200,
    height: 88,
    backgroundColor: '#FFF0E0',
    borderColor: 'black',
    borderWidth: 1,
  },
  twoPickerItems: {
    height: 88,
    color: 'red'
  },
});
8
Michael Cheng

PickerのitemStyleの高さを1に設定します。44。styleの高さを44に設定します。フレックスを削除します：1（存在する場合）。

      <Picker
        selectedValue={this.state.selectedState}
        onValueChange={onValueChange}
        style={styles.picker}
        itemStyle={styles.pickerItem}
      >
        {this.state.states.map((v, i) => (
          <Picker.Item key={i} label={v.label} value={v.value} />
        ))}
      </Picker>


StyleSheet.create({
  picker: {
  // flex: 1,
    width: "100%",
    height: 44,
  },
  pickerItem: {
    height: 44
  }
})
1
Adrian Bartholomew