javascript - React Native - 轮式选择器 : Invariant violation. 'WheelCurvedPicker' 的 native 组件不存在

Question

通过以下代码安装WheelPicker

npm i react-native-wheel-picker --save

在settings.gradle中添加了以下内容

include ':react-native-wheel-picker'
project(':react-native-wheel-picker').projectDir = new File(settingsDir, '../node_modules/react-native-wheel-picker/android')

在 app/build.gradle 中添加了以下内容

compile project(':react-native-wheel-picker')

App.js

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
} from 'react-native';


import Picker from 'react-native-wheel-picker'
var PickerItem = Picker.Item;

export default class App extends Component<{}> {

    constructor(props) {
        super(props);
        this.state = {
            selectedItem : 2,
            itemList: ['刘备', '张飞', '关羽', '赵云', '黄忠', '马超', '魏延', '诸葛亮']
        };
    }

    onPickerSelect (index) {
        this.setState({
            selectedItem: index,
        })
    }

    onAddItem = () => {
        var name = '司马懿'
        if (this.state.itemList.indexOf(name) == -1) {
            this.state.itemList.push(name)
        }
        this.setState({
            selectedItem: this.state.itemList.indexOf(name),
        })
    }

    render () {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Picker style={{width: 150, height: 180}}
                    selectedValue={this.state.selectedItem}
                    itemStyle={{color:"white", fontSize:26}}
                    onValueChange={(index) => this.onPickerSelect(index)}>
                        {this.state.itemList.map((value, i) => (
                            <PickerItem label={value} value={i} key={"money"+value}/>
                        ))}
                </Picker>
                <Text style={{margin: 20, color: '#ffffff'}}>
                    你最喜欢的是：{this.state.itemList[this.state.selectedItem]}
                </Text>

                <Text style={{margin: 20, color: '#ffffff'}}
                        onPress={this.onAddItem}>
            怎么没有司马懿？
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#1962dd',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color: '#ffffff',
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

我收到如下错误:

Invariant Violation: Native component for "WheelCurvedPicker" does not exist

This error is located at: in Item (at App.js:48) in WheelCurvedPicker (at WheelCurvedPicker.android.js:89) in WheelCurvedPicker (at App.js:43) in RCTView (at View.js:60) in View (at App.js:39) in App (at renderApplication.js:33) in RCTView (at View.js:60) in View (at AppContainer.js:102) in RCTView (at View.js:60) in View (at AppContainer.js:122) in AppContainer (at renderApplication.js:32) getViewConfig requireNativeComponent.js:107:6 get$1 ReactNativeRenderer-dev.js:14131:17 createInstance ReactNativeRenderer-dev.js:14295:27 completeWork ReactNativeRenderer-dev.js:10097:14 completeUnitOfWork ReactNativeRenderer-dev.js:12769:10 performUnitOfWork ReactNativeRenderer-dev.js:12941:32 workLoop ReactNativeRenderer-dev.js:12953:43 renderRoot ReactNativeRenderer-dev.js:12996:17 performWorkOnRoot ReactNativeRenderer-dev.js:13632:34 performWork ReactNativeRenderer-dev.js:13545:26 performSyncWork ReactNativeRenderer-dev.js:13506:16 requestWork ReactNativeRenderer-dev.js:13392:6 scheduleWorkImpl ReactNativeRenderer-dev.js:13259:24 scheduleWork ReactNativeRenderer-dev.js:13207:28 scheduleRootUpdate ReactNativeRenderer-dev.js:13930:17 _updateContainerAtExpirationTime ReactNativeRenderer-dev.js:13966:6 updateContainer ReactNativeRenderer-dev.js:13991:8 render ReactNativeRenderer-dev.js:14726:35 renderApplication renderApplication.js:49:21 run AppRegistry.js:102:10 runApplication AppRegistry.js:194:26 __callFunction MessageQueue.js:351:47 MessageQueue.js:116:26 __guardSafe MessageQueue.js:314:6 callFunctionReturnFlushedQueue MessageQueue.js:115:17

Answer 1

此错误是由于项目编译不完整或项目未正确设置造成的。

基于library提供的安装步骤您在上述问题中，我认为您忘记使用该软件包。

修改主应用程序

 import com.zyu.ReactNativeWheelPickerPackage;
    ......

    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(), new ReactNativeWheelPickerPackage()
        );
    }

在此之后重建并运行