反应本机- WheelPicker :不变的违反。“WheelCurvedPicker”的本机组件不存在

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,
    },
});

我收到一个错误如下：

不变冲突："WheelCurvedPicker“的本机组件不存在 此错误位于WheelCurvedPicker中的Item (at WheelCurvedPicker.android.js:89)、WheelCurvedPicker (at App.js:43)、RCTView (at View.js:60)、View (at App.js:39)、App (at renderApplication.js:33)、RCTView (at View.js:60)、View (at AppContainer.js:102)和RCTView (at View )。.js:60 (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:43renderRoot 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 ReactNativeRendererReactNativeRenderer-dev.js:13991:8呈现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和您在上述问题中提供的安装步骤，我认为您忘记使用包了。

修改MainApplication

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

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

重建和运行之后

Answer 2

WheelPicker在react本机中的手动链接包括以下步骤

将下列行添加到其特定文件中：

settings.gradle：

路径：梯度/设置

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

build.gradle：

路径：app/build.gradel

implementation project(':react-native-wheel-picker-android')

MainApplication.java：

路径：app/src/main/java/MainApplication.java

在List getPackages()方法中，在新MainReactPackage()：()之后添加下面一行，因此您的方法应该如下所示：

@Override
    protected List<ReactPackage> getPackages() {
      // Returning the Packages this way is better than calling the getPackages that was here
      //by default which overridden my FbModule
      return new ArrayList<>(Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              new WheelPickerPackage()
      ));
    }

然后它就能工作了