Question

我有一个面板，其中键盘始终处于打开状态，因为我不希望用户将其关闭。在该面板中，我有一个FlatList看起来像这样：

  const opts = {
    jwtFromRequest: ExtractJwt.fromAuthHeaderWithScheme('Bearer'),
    secretOrKey: key,
    algorithm: ["RS256"]
  };
passport.use(
     new JwtStrategy(opts, (payload, done) => {
       log.info({message: 'verifying the token', payload});
       User.findById(payload.id)
         .then(user => {
           if (user) {
             return done(null, {
               id: user._id,
               name: user.userName,
               email: user.emailAddress
             });
           }
           log.info(payload);
           return done(null, false);
         })
         .catch(err => {
           log.error(err)
           return done('Unauthorized', false, payload);
          });
     })
   );

到目前为止，我已经达到了我想要的。但是，当键盘向上时-它会隐藏FlatList呈现的项目的底部。用户无法向上滚动并查看最后一项，因为它们留在键盘后面。

如何在打开和打开FlatList的全部内容的同时保持键盘打开（并禁用关闭功能）？

Answer 1

您可以添加键盘侦听器事件以获取键盘的高度。

this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', (e) => {
  this.setState({ keyboardHeight: e.endCoordinates.height, keyboardShow: true })
  Animated.timing(this.visibleHeight, {
    duration: e.duration,
    toValue: 1,
    easing: Easing.inOut(Easing.ease)
  }).start()
})

查看这样的代码

<Animated.View style={Platform.OS === 'android' ? { flex: 1 } : {
      height: this.visibleHeight.interpolate({
        inputRange: [0, 1],
        outputRange: [height - this.NavHeaderHeight, height - this.state.keyboardHeight - this.NavHeaderHeight]
      })
    }
    } >
     /*Your FlatList*/
</Animated.View>

我希望它对您有用

Answer 2

我也遇到过类似的情况。我在右下角有一个底部的浮动操作按钮，略微隐藏了最后一个项目。

因此，我在列表末尾添加了一个假空白项目，以便我可以将其向上滚动更多。

简单又棘手。如果您添加一些空白iten或一个足够宽的空白项目，我希望它也对您有用。

编辑1：

假设您的数据数组是这样的：.alert[role = "alert" class = "alert-#{alert-type}"] button.close[type="button" data-dismiss="alert" aria-hidden="true"]

在将新的空白项传递到using System; using System.Linq; using System.Collections.Generic; public class Program { public static void Main() { var test1 = new [] {1, 2, 3}; var test2 = new [] {2, 3, 1}; var test3 = new [] {3, 1, 2}; var test4 = new [] {2, 1, 3}; test1.IsCiruclarPermutation(test2); test1.IsCiruclarPermutation(test3); test2.IsCiruclarPermutation(test1); test2.IsCiruclarPermutation(test3); test3.IsCiruclarPermutation(test1); test3.IsCiruclarPermutation(test2); test4.IsCiruclarPermutation(test1); test4.IsCiruclarPermutation(test2); test4.IsCiruclarPermutation(test3); } } public static class ArrayExtensions { public static bool IsCiruclarPermutation(this int[] source, int[] dest) { Console.Write(string.Join(",", source) + " is a Ciruclar Permutation of "); Console.Write(string.Join(",", dest)); var left = source.ToList(); var right = dest.ToList(); right.AddRange(dest); var result = false; for (int idx = 0; idx < left.Count; idx++) { var compareTo = right.Skip(idx).Take(left.Count); result = Enumerable.SequenceEqual(left, compareTo); if (result) break; } Console.WriteLine(" " + result.ToString()); return result; } }的同时，必须将新的空白项连接到数据数组，如下所示：

[{title: "Item 1"}, {title: "Item 2"}]

调整“ \ n”的数量，直到您可以滚动列表以使其可见。必须有最小数量。并且请确保您的<FlatList>不要将项目设置为固定值。

React Native-FlatList无法触底

2 个答案: