在React native中查看分页器

Question

我正在尝试安装React Native View Pager。但是当我运行该应用程序时会显示这种错误。我的代码

import {StyleSheet, View, Text} from 'react-native';
import React, {Component} from 'react';
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';

export default class ViewPagerPage extends Component {
    render() {
        return (
        <View style={{flex:1}}>
            <IndicatorViewPager
                style={{height:200}}
                indicator={this._renderDotIndicator()}
            >
                <View style={{backgroundColor:'cadetblue'}}>
                    <Text>page one</Text>
                </View>
                <View style={{backgroundColor:'cornflowerblue'}}>
                    <Text>page two</Text>
                </View>
                <View style={{backgroundColor:'#1AA094'}}>
                    <Text>page three</Text>
                </View>
            </IndicatorViewPager>

            <IndicatorViewPager
                style={{flex:1, paddingTop:20, backgroundColor:'white'}}
                indicator={this._renderTitleIndicator()}
            >
                <View style={{backgroundColor:'cadetblue'}}>
                    <Text>page one</Text>
                </View>
                <View style={{backgroundColor:'cornflowerblue'}}>
                    <Text>page two</Text>
                </View>
                <View style={{backgroundColor:'#1AA094'}}>
                    <Text>page three</Text>
                </View>
            </IndicatorViewPager>

            <IndicatorViewPager
                style={{flex:1, paddingTop:20, backgroundColor:'white'}}
                indicator={this._renderTabIndicator()}
            >
                <View style={{backgroundColor:'cadetblue'}}>
                    <Text>page one</Text>
                </View>
                <View style={{backgroundColor:'cornflowerblue'}}>
                    <Text>page two</Text>
                </View>
                <View style={{backgroundColor:'#1AA094'}}>
                    <Text>page three</Text>
                </View>
            </IndicatorViewPager>
        </View>
    );
}

_renderTitleIndicator() {
    return <PagerTitleIndicator titles={['one', 'two', 'three']} />;
}

_renderDotIndicator() {
    return <PagerDotIndicator pageCount={3} />;
}

_renderTabIndicator() {
    let tabs = [{
            text: 'Home',
            iconSource: require('../imgs/ic_tab_home_normal.png'),
            selectedIconSource: require('../imgs/ic_tab_home_click.png')
        },{
            text: 'Message',
            iconSource: require('../imgs/ic_tab_task_normal.png'),
            selectedIconSource: require('../imgs/ic_tab_task_click.png')
        },{
            text: 'Profile',
            iconSource: require('../imgs/ic_tab_my_normal.png'),
            selectedIconSource: require('../imgs/ic_tab_my_click.png')
    }];
    return <PagerTabIndicator tabs={tabs} />;
}

}

Answer 1

您已经忘记安装rn-viewpager，只是先安装然后运行

yarn add rn-viewpager
react-native run-android