react-native - 材料底部选项卡上的 ScrollView 不起作用

Question

当前行为

我正在创建这样的选项卡（注意：主页是 StackNavigator 屏幕）：

ProfileTab 以这种方式呈现（项目是输入数组）：

return <ScrollView contentContainerStyle={{flex: 1, backgroundColor: Colors.primaryShade3,
                                               paddingTop: Sizes.paddingTop}}>
              <View style={{flexDirection: "row", alignItems: "center", marginBottom: 50}}>
                  <Image source={{uri: RNStorage.userProfile.user.photo}} 
                         style={{marginRight: 20, resizeMode: "contain", width: 70, height: 70, borderRadius: 50}}/>
                  <Text style={{color: Colors.white, fontSize: Sizes.h2}}>
                    Bem vindo, {RNStorage.userProfile.user.givenName}
                  </Text>
              </View>                            
              {items}
   </ScrollView>

所有输入都遵循以下结构：

目前有这种行为（不滚动）：

预期行为

滚动应该正常工作。我还使用 react-native-gesture-handler 的 ScrollView 进行了测试，但它也不起作用。

Answer 1

这与材料底部选项卡无关。

您需要flex: 1从contentContainerStyle. 否则，您的视图将填充可用的可滚动区域并且不可滚动。