ネイティブベースのピッカーが正常に動作しないAndroid - 関数がonValueChangeをトリガーしない

私はreact-nativeのアプリケーションにNative-BaseのPickerコンポーネントを使用しています。 IOSではすべてがOKですが、に追加された機能を起動できない側のAndroidにあります。ネイティブベースのピッカーが正常に動作しないAndroid - 関数がonValueChangeをトリガーしない

以前にこの問題に直面した人はいますか？

どのように修正しましたか？私はここで一日近く立ち往生した。

ここに私のコードです。

<Picker style={{ width: 200, height: 40}} 
            iosHeader="Branch" 
            Header="Branch" 
            mode="dropdown" 
            textStyle={{color: 'white'}} 
            placeholder="Branch" 
            headerBackButtonText="Geri" 
            selectedValue={this.state.selectedBranch} 
            onValueChange={(value)=>this.onBranchSelected(value)} 
           > 
            {this.state.branches.map((branches, i)=>{ 
              return(
               <Picker.Item label={branches.address_line} value={branches.id} key={i}/> 
              ); 
             } 
            )} 
           </Picker>

Androidでは機能onBranchSelectedを呼び出しません。

出典

2017-12-16 Ali Zeynalov

を扱っていないどのように表示します。私のコード

import React, { Component } from "react"; 
import { Platform } from "react-native"; 
import { Container, Header, Title, Content, Button, Icon, Text, Right, Body, Left, Picker, Form } from "native-base"; 

export default class PickerExample extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     branches: [ 
     { address_line: 'address 1', id: 1 }, 
     { address_line: 'address 2', id: 2 }, 
     { address_line: 'address 3', id: 3 }, 
     { address_line: 'address 4', id: 4 }, 
     { address_line: 'address 5', id: 5 }], 
     selected1: 1 
    }; 
    } 

    onBranchSelected(value) { 
    this.setState({ 
     selectedBranch: value 
    }); 
    } 

    render() { 
    return (
     <Container> 
     <Header> 
      <Left> 
      <Button transparent> 
       <Icon name="arrow-back" /> 
      </Button> 
      </Left> 
      <Body> 
      <Title>Picker</Title> 
      </Body> 
      <Right /> 
     </Header> 
     <Content> 
      <Form> 
      <Picker 
       style={{ width: 200, height: 40 }} 
       iosHeader="Branch" 
       Header="Branch" 
       mode="dropdown" 
       textStyle={{ color: 'grey' }} 
       placeholder='Select branch' 
       headerBackButtonText='Geri' 
       selectedValue={this.state.selectedBranch} 
       onValueChange={(value) => this.onBranchSelected(value)} 
      > 
       {this.state.branches.map((branches, i) => { 
       return (
        <Picker.Item label={branches.address_line} value={branches.id} key={i} /> 
       ); 
       } 
      )} 
      </Picker> 
      </Form> 
     </Content> 
     </Container> 
    ); 
    } 
}

依存

"native-base": "2.3.5", 
"react": "16.0.0", 
"react-native": "0.50.0",

出典

2017-12-18 06:20:27

これは、Pickerの既知の問題です。問題は、.mapを使用しようとしています。私は自分でピッカーと作業するための地図を手に入れることができませんでした。私が見つけることができる唯一のものは、反応のネイティブスマートピッカーと呼ばれるnpmパッケージでした。私はこれで.mapを使用することができました。制限があります。

また、他のブートストラップフレームワークも試しましたが、これはバニラ反応ネイティブの問題です。相続人

リンク.. https://www.npmjs.com/package/react-native-smart-picker

HERESに私のGitHubのレポ...私はそれを実装し https://github.com/GavinThomas1192/motoMechanicMeeKanic/blob/master/App/Components/vehicleMakePicker.js

HERESに私のコード。

<ScrollView > 
      <View style={{ flex: 1, marginTop: 20 }}> 
       {this.state.makes.length > 1 ? 
        <ScrollView > 
         <SmartPicker 

          expanded={this.state.expanded} 
          selectedValue={this.state.selectedMake} 
          label='Select Make' 
          onValueChange={this.handleChange.bind(this)} 
         > 
          { 
           this.state.makes.map((ele) => { 
            return (<Picker.Item label={ele} value={ele} />) 
           }) 
          } 
          <Picker.Item label='Select Make' value='Toyota' /> 
         </SmartPicker> 
         <Button block onPress={() => this.props.vehicleMake(this.state.selectedMake)}> 
          <Text>Done</Text> 
         </Button> 
        </ScrollView> 
        : <Spinner />} 

      </View> 

     </ScrollView>

更新私は、私はあなたのコードを試してみましたが、私のために罰金働いていた何の拡張ボタン

<Content> 
        <Text>Vehicle Stats:</Text> 
        <Text>Year: {this.state.vehicleYear}</Text> 
        <Text>Make: {this.state.vehicleMake}</Text> 
        <Text>Model: {this.state.vehicleModel}</Text> 


          {this.state.vehicleYear === '' ? <VehicleYearPicker vehicleYear={this.yearPicked} /> : undefined} 

          {this.state.vehicleYear !== '' && this.state.vehicleMake === '' ? <VehicleMakePicker pickedYear={this.state.vehicleYear} vehicleMake={this.makePicked} /> : undefined} 

          {this.state.vehicleModel === '' && this.state.vehicleMake !== '' ? <VehicleModelPicker homeState={this.state} vehicleModel={this.modelPicked} /> : undefined} 

         </Content>

出典

2017-12-16 23:01:20

おかげで男を貼り付ける

。あなたのコメントを読んだ後、私は反応ネイティブスマートピッカーを実装しました。しかし、このコンポーネントにはいくつかの問題もあります。拡張された小道具が機能せず、Android側でピッカーを開くことができません。これらの問題をどうやって解決しましたか？ –

拡張可能なピッカーのことについてgithubで実際にその問題を開いた...今週試してみるつもりです。上のコードでは、ピッカーはAndroidアプリで動作します。ユーザーが完了ボタンをクリックすると、そのボタンがクリックされたコンポーネントを非表示にして次のボタンを表示する親コンポーネントにある関数がトリガーされます。 –

ネイティブベースのピッカーが正常に動作しないAndroid - 関数がonValueChangeをトリガーしない

答えて

関連する問題