滚动视图以React导航选项卡为内容

时间:2018-10-25 18:45:17

标签: react-native react-native-android react-navigation react-native-scrollview

我有一个身份验证屏幕,我想在其中显示徽标并对在两个组件之间切换的本机选项卡做出反应。当标签内容的高度太大而无法容纳屏幕时,我希望能够向下滚动。

class AuthContainer extends Component {
    render() {
        return (
            <View style={{flex:1, paddingBottom: 20}}>
                <ScrollView
                    contentContainerStyle={{ flexGrow: 1}}
                    vertical={true}
                    nestedScrollEnabled={true}
                    >
                    <View style={authContainerStyles.heading}>
                        <Image
                            source={require('../../assets/images/logo.png')}
                            style={authContainerStyles.headingImage}
                            resizeMode='contain'
                        />
                    </View>

                    <Tabs/>

                </ScrollView>
            </View>
        )
    }
}

export default AuthContainer;

问题在于,即使“选项卡”组件的内容超过了屏幕高度,滚动视图也不会显示。

“我的标签”组件:

const routes = {
    LogIn: {
        screen           : LogIn,
        navigationOptions: {
            title     : 'LogIn'
         }
    },
    SignUp: {
        screen           : SignUp,
        navigationOptions: {
            title     : 'SignUp'
        }
    }
}

const routeConfig = {
    tabBarOptions : {
        animationEnabled: true,
        showLabel        : true
    }
}

export default createMaterialTopTabNavigator(routes, routeConfig);

感谢您的帮助。谢谢大家的时间!

0 个答案:

没有答案