React Native中Native Base Picker项目的条件渲染

Question

我正在使用‘Native Base’组件来开发我们的产品，目前进展顺利，但是我卡在了一个问题上，即如何将选项加入到Nativebase Picker中。我的代码如下：

渲染方法代码 -

render(){

  return (

      <View style={{marginTop: 20,  flexDirection:'row', flexWrap:'wrap', justifyContent:'space-around', alignItems:'center'}}>

        <View style={{flex:1, justifyContent:'center', alignItems:'flex-end' }}>
          <Button
             style={{ backgroundColor: '#6FAF98', }}
             onPress={this._showDateTimePicker}

             >
             <Text>Select Date</Text>
          </Button>
        </View>

        <View style={{flex:1, justifyContent:'center', alignItems:'stretch'}}>
          <Picker
              style={{borderWidth: 1, borderColor: '#2ac', alignSelf:'stretch'}}
              supportedOrientations={['portrait','landscape']}
              iosHeader="Select one"
              mode="dropdown"
              selectedValue={this.state.leaveType}
              onValueChange={(value)=>this.setState({leaveType:value,})
                //this.onValueChange.bind(this)
              }>

              <Item label="Full Day" value="leave1" />
              {
                this.showStartDateFirstHalf() // Here I want to show this picker item on the basis of a condition 
              }
              <Item label="2nd half" value="leave3" />
         </Picker>
        </View>
        <DateTimePicker

          isVisible={this.state.isStartDatePickerPickerVisible}
          onConfirm={this._handleDatePicked}
          onCancel={this._hideDateTimePicker}
          mode='date'
        />

      </View>



    );


}

showStartDateFirstHalf()
{
    if(!this.state.isMultipleDays)
    {
      return(
          <Item label="1st Half" value="leave2" />
      );
    }
}

所以，如果this.state.isMultipleDays为false，那么这段代码就可以正常工作。但是当this.state.isMultipleDays为true时，也就是在else部分时，我会收到以下错误信息 -

无法读取未定义的属性“props”

- bygirish

---

当我试图在“showStartDateFirstHalf（）”方法的else部分返回“null”时，它显示无法读取null的属性“prop”。 - bygirish

当代码被移出<Picker />组件并且你渲染<View />而不是<Item />时，这是否有效？ - Sanket Sahu

请问能否查看Picker的源代码？ - Dan

如果我这样做，那么它可以为“else”部分工作，但会创建一个空项目 -showStartDateFirstHalf() { if(!this.state.isMultipleDays){ return( <Item label="第一半" value="leave2" /> ); } else{ return( <View></View> ); } } - bygirish

如果我尝试将所有项目编码为一个单独的方法，如下所示，那么这根本不起作用。 fillItems() { return( <View> <Item label="全天" value="请假1" /> <Item label="上午" value="请假2" /> <Item label="下午" value="请假3" /> </View> )} - bygirish

@Dan 我使用了Native-Base的这个Pickerhttps://docs.nativebase.io/Components.html#Picker - bygirish

Answer 1

我认为有一个更简单的解决方案。不要创建单独的showStartDateFirstHalf()函数，尝试这样做：

render() {

  const pickerItems = [
    {
      label: 'Full Day',
      value: 'leave1',
    },
    {
      label: '1st Half',
      value: 'leave2',
    },
    {
      label: '2nd Half',
      value: 'leave3',
    },
  ];

  const filteredItems = pickerItems.filter(item => {
    if (item.value === 'leave2' && this.state.isMultipleDays) {
      return false;
    }
    return true;
  });

  // The 'return' statement of your render function
  return (
    ...
    <Picker ...>
      {(() => 
        filteredItems.map(item => 
          <Item label={item.label} value={item.value} />
      )()}
    </Picker>
    ...
  );
}

这样，您已经有了一个在渲染周期的return语句之前确定的项目列表。此外，使用filter而不是map将不仅在未满足条件时给您null作为第二个项目，而且还将完全删除该项目。

- mjmasia

---

谢谢，这对我很有用。我做了一点改进，让它适用于我的情况。<Picker ...> { filteredItems.map(item => <Item label={item.label} value={item.value} />) } </Picker> - bygirish