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

我收到如下错误：

不变违规：＆＃34; WheelCurvedPicker＆＃34;的原生组件才不是   存在

此错误位于：       在项目中（在App.js：48）       在WheelCurvedPicker中（在WheelCurvedPicker.android.js：89）       在WheelCurvedPicker中（在App.js：43）       在RCTView（在View.js：60）       在视图中（在App.js：39）       在App中（在renderApplication.js：33）       在RCTView（在View.js：60）       在视图中（在AppContainer.js：102）       在RCTView（在View.js：60）       在视图中（在AppContainer.js：122）       在AppContainer中（在renderApplication.js：32中）getViewConfig       requireNativeComponent.js：107：6得到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渲染       ReactNativeRenderer-dev.js：14726：35 renderApplication       renderApplication.js：49：21运行       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

React native中的WheelPicker手动链接随这些步骤一起提供

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

settings.gradle ：
路径：gradle / setting.gradel

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（）之后添加以下行：new WheelPickerPackage（）因此您的方法应如下所示：

@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()
      ));
    }

然后它应该工作

React Native - WheelPicker：不变违规。用于＆＃39; WheelCurvedPicker＆＃39;的本机组件不存在

2 个答案: