react-native - Native Base Picker 项目的条件渲染 [React Native]

Question

我正在为我们的产品使用“Native Base”组件，并且效果很好，
但我有一点被卡住了，它是关于将 Items 放入 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，此代码工作正常是假的，但是当 this.state.isMultipleDays是真的，这意味着它在 else 中时部分然后我收到此错误 -

Cannot read property 'props' of undefined

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如果不满足条件，则作为第二个项目，但将完全删除该项目。