Question

“ react-native-material-textfield”中的{ TextField }存在问题。 TextInput只是包装器。因此，当我将几个TextInput组件放入ScrollView时，这是我的模拟代码。在这种情况下，KeyboardAvoidingView可以正常工作（但在android上，offset不能正常工作，这不是问题的根源）case 1

render() {
   const behavior = Platform.OS === 'ios' ? 'padding' : null
   return (
     <View style={{flex: 1}}>
       <KeyboardAvoidingView behavior={behavior} keyboardVerticalOffset={20} style={{flexGrow: 1}}>
         <ScrollView contentContainerStyle={{flexGrow: 1}}>
           <View style={{flex: 1}} />
           <TextInput style={{backgroundColor: '#EEEEEE', marginBottom: 10}} />
           <TextInput style={{backgroundColor: '#EEEEEE', marginBottom: 10}} />
           <TextInput style={{backgroundColor: '#EEEEEE', marginBottom: 10}} />
           <TextInput style={{backgroundColor: '#EEEEEE', marginBottom: 10}} />
           <TextInput style={{backgroundColor: '#EEEEEE', marginBottom: 10}} />
         </ScrollView>
       </KeyboardAvoidingView>
     </View>
  )}

这是另一种情况，当我放置更多TextInputs时。键盘部分覆盖了彼此相关的TextInput。这是什么问题...？我只是更改了内部组件的数量。没有。

case 2, more inputs inside

和代码

render() {
const behavior = Platform.OS === 'ios' ? 'padding' : null
return (
  <View style={{flex: 1}}>
    <KeyboardAvoidingView behavior={behavior} keyboardVerticalOffset={20} style={{flexGrow: 1}}>
      <ScrollView contentContainerStyle={{flexGrow: 1}}>
        <View style={{flex: 1}} />
        <TextInput style={{backgroundColor: '#EEEEEE', marginBottom: 10}} />
        <TextInput style={{backgroundColor: '#EEEEEE', marginBottom: 10}} />
        <TextInput style={{backgroundColor: '#EEEEEE', marginBottom: 10}} />
        <TextInput style={{backgroundColor: '#EEEEEE', marginBottom: 10}} />
        <TextInput style={{backgroundColor: '#EEEEEE', marginBottom: 10}} />
        <TextInput style={{backgroundColor: '#EEEEEE', marginBottom: 10}} />
        <TextInput style={{backgroundColor: '#EEEEEE', marginBottom: 10}} />
        <TextInput style={{backgroundColor: '#EEEEEE', marginBottom: 10}} />
      </ScrollView>
    </KeyboardAvoidingView>
  </View>
)}

TextInput包装器

const TextInput = ({inputRef, placeholder, ...props}) => (
      <TextField
       {...props}
       containerStyle={style}
       fontSize={15}
       labelFontSize={11}
       textColor={colors.activeGrey}
       errorColor={colors.error}
       tintColor={colors.activeGrey}
       baseColor={colors.activeGrey}
       labelHeight={24}
       label={placeholder}
       ref={inputRef}
       labelTextStyle={fontStyle}
    />
)

有什么想法吗？

React-Native KeyboardAvoidingView部分覆盖了react-native-material-textfield

0 个答案: