React-Native Textinput在List中不可点击,Accordion

frebpwbc  于 2023-04-22  发布在  React
关注(0)|答案(1)|浏览(162)

我正在用React-Native创建一个移动的应用程序,它的屏幕上有许多Textinput字段。(包括软件包更新)我无法再点击输入字段(Textinput没有焦点,键盘也不显示),但textinput字段可见。如果我打开元素检查器并单击输入字段,它只会显示Textinput上方的View。我还有另一个Textinput屏幕,它仍然可以工作。
这是我的代码的一个例子:

<TouchableWithoutFeedback
      onPress={() => {
        setEnableAutomaticScroll(false);
        Keyboard.dismiss();
      }}>
      <View style={stylesList.renderItem}>
        <List.Section style={stylesList.listSection}>
          {Boolean(renderItem?.onlyHeader) ? (
            <List.Subheader style={stylesList.subheader}>{renderItem?.group}</List.Subheader>
          ) : (
            <List.Accordion
              expanded={renderItem?.expanded}
              chevron={false}
              onPress={async () => await closeOthersAccordions()}
              style={stylesList.listAccordion}
              left={() => (
                <View onPress={async () => await closeOthersAccordions()}>
                  <Controller
                    control={control}
                    render={({ field: { onChange, onBlur, value } }) => (
                      <TextInput
                        returnKeyType='done'
                        selectTextOnFocus={!renderItem?.editable}
                        onTouchStart={async () => {
                          if (!renderItem?.editable) setEnableAutomaticScroll(false);
                          else setEnableAutomaticScroll(true);
                          await closeOthersAccordions();
                        }}
                        ref={textInputRef}
                        keyboardType={Platform.OS == 'android' ? 'phone-pad' : 'numbers-and-punctuation'}
                        label={showPlaceholder && !renderItem?.Value ? '' : LabelText}
                        multiline
                        adjustsFontSizeToFit
                        placeholder={placeholder}
                        error={error || errorNaN}
                        dense
                        style={stylesList.textInput}
                        defaultValue={renderItem?.Value?.toString()?.replace('.', ',')}
                        onFocus={async () => {
                          setEnableAutomaticScroll(true);
                          await closeOthersAccordions();
                        }}
                        editable={renderItem?.editable}
                        onEndEditing={async (e) => {
                          console.log("onEndEditing);
                        }}
                        onSubmitEditing={async (e) => {
                          console.log("onSubmitEditing);
                        }}
                        onChangeText={async (value) => {
                          console.log("onChangeText);
                          }
                        }}></TextInput>
                    )}
                    name={renderItem?.valueName}
                    rules={{
                      required: true,
                      min: {
                        value: renderItem?.minValue, 
                        message: 'error message',
                      },
                    }}
                    defaultValue={renderItem?.Value?.toString()?.replace('.', ',')}
                  />                   
                  {error && <Text style={stylesList.error}>{requiredText}</Text>}
                  {errorNaN && <Text style={stylesList.error}>{errorIsNaNText}</Text>}
                </View>                
              )}>
              <View style={stylesList.listItemsContainer}>
                [...]
              </View>
            </List.Accordion>
          )}
        </List.Section>
      </View>
    </TouchableWithoutFeedback>

我已经在google上搜索了几个小时,但没有找到任何适合我的问题的解决方案。

hs1ihplo

hs1ihplo1#

编辑react-native-paper包(v5.6.0)对我来说很有用。我将文件node_modules\react-native-paper\src\components\List\ListAccordion. tsx中的属性'pointerEvents'从'none'更改为'box-none'。

相关问题