0

我正在使用 textInput 在一个世博项目上搜索一些关键字，在一个小动画之后，用户可以在输入上书写......
它在 IOS 上完美运行，但在 android 上它只有在我点击我的最右边时才会响应输入。

这是我的组件：

const Container = styled.View`
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 100%;
`;

const TextInput = styled.View<TextFiledProps>`
flex:1;
  height: 38px;
  width: 100%;
  right: ${props => props.focus ? 60 : 44 }%;
  bottom: 10px;
  top:${props => props.focus ? -5 : 0}px;
`;
const Input = Animated.createAnimatedComponent(TextInput);

const SearchButton = styled.Pressable`
  flex: 1;
  align-items: center;
  justify-content: center;
`;

const IconContainer = styled.View`
top: ${Platform.OS === 'ios' ? 32 : 10}%
`;  

const SearchInput: React.FunctionComponent<ISearchInputProps> = ({
  isFocused,
  displayHeading,
}) => {
  const [viewSearchBar, setViewSearchBar] = React.useState(false);
  const [focus, setFocus] = React.useState(isFocused);
  const [showClearButton, setShowClearButton] = React.useState(false);
  const [value, setValue] = React.useState('');

  const animation = useSharedValue({ width: 0 });

  const animationStyle = useAnimatedStyle(() => {
    return {
      width: withTiming(animation.value.width, {
        duration: 800,
      }),
    };
  });

  const handleOnPress = () => {
    setViewSearchBar(!viewSearchBar);
    animation.value = { width: (Device.width * 90) / 100 };
    displayHeading(false);
  };

  const handleOnBlur = () => {
    animation.value = { width: 0 };
    setFocus(false);
    setViewSearchBar(!viewSearchBar);
    setShowClearButton(false)
    displayHeading(true);
  };

  const autoFocus: boolean = Platform.OS === 'android' ? true : false;
  return (
    <SafeAreaView>
      <Container>
        {viewSearchBar && (
          <Input style={[animationStyle]} focus={focus}>
            <TextField
              label={I18n.t('currentAccount.searchTransactions')}
              errorText={''}
              autoFocus={false}
              value={value}
              icon={
                <SearchIcon
                  width={15}
                  height={15}
                  color={EAppColors.DARK_GREY}
                />
              }
              onChangeText={(value: string) => {
                setShowClearButton(true);
                setFocus(true);
                setValue(value);

                // this.setState({
                //   phoneNumber: phoneFormated,
                //   hasError: false,
                //   errorText: '',
                //   disabled: false,
                //   showClearButton: true,
                // });
              }}
              onSubmitEditing={() => {
                // this.setState({
                //   hasError: true,
                //   errorText: 'Le numéro de téléphone est obligatoire',
                // });
              }}
              placeHolder={I18n.t('auth.placeHolder.searchByKey')}
              isFocused={focus}
              hasError={false}
              onBlur={handleOnBlur}
              onClearText={() => {
                setValue('');

              }}
              showClearButton={showClearButton}
              onFocus={() => {
                animation.value = { width: (Device.width * 77) / 100 };
                setFocus(true);
              }}
            />
          </Input>
        )}
        {!viewSearchBar && (
          <SearchButton onPress={handleOnPress}>
            <SearchIcon width={19} height={19} />
          </SearchButton>
        )}
        {focus && (
          <IconContainer>
            <FiltersIcon />
          </IconContainer>
        )}
      </Container>
    </SafeAreaView>
  );
};

我使用"expo": "^41.0.0和"react-native": "41.0.0"
自动对焦效果很好，如果我删除动画视图，它也可以正常工作。有
什么想法吗？

4

0 回答 0