2016-09-21 13 views
2

React Nativeを初めて使用しています。 ReactNativeがウェブサイトに持っているcameraroll exampleを実装するだけです。React Native:モジュールを解決できません./CameraRollView

私は正確に自分のコードをコピーした:

'use strict'; 

const React = require('react'); 
const ReactNative = require('react-native'); 
const { 
    CameraRoll, 
    Image, 
    Slider, 
    StyleSheet, 
    Switch, 
    Text, 
    View, 
    TouchableOpacity 
} = ReactNative; 

const CameraRollView = require('./CameraRollView'); 

const AssetScaledImageExampleView = require('./AssetScaledImageExample'); 

const CAMERA_ROLL_VIEW = 'camera_roll_view'; 

class CameraRollExample extends React.Component { 
    state = { 
    groupTypes: 'SavedPhotos', 
    sliderValue: 1, 
    bigImages: true, 
    }; 

    render() { 
    return (
     <View> 
     <Switch 
      onValueChange={this._onSwitchChange} 
      value={this.state.bigImages} /> 
     <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text> 
     <Slider 
      value={this.state.sliderValue} 
      onValueChange={this._onSliderChange} 
     /> 
     <Text>{'Group Type: ' + this.state.groupTypes}</Text> 
     <CameraRollView 
      ref={CAMERA_ROLL_VIEW} 
      batchSize={20} 
      groupTypes={this.state.groupTypes} 
      renderImage={this._renderImage} 
     /> 
     </View> 
    ); 
    } 

    loadAsset = (asset) => { 
    if (this.props.navigator) { 
     this.props.navigator.push({ 
     title: 'Camera Roll Image', 
     component: AssetScaledImageExampleView, 
     backButtonTitle: 'Back', 
     passProps: { asset: asset }, 
     }); 
    } 
    }; 

    _renderImage = (asset) => { 
    const imageSize = this.state.bigImages ? 150 : 75; 
    const imageStyle = [styles.image, {width: imageSize, height: imageSize}]; 
    const location = asset.node.location.longitude ? 
     JSON.stringify(asset.node.location) : 'Unknown location'; 
    return (
     <TouchableOpacity key={asset} onPress={ this.loadAsset.bind(this, asset) }> 
     <View style={styles.row}> 
      <Image 
      source={asset.node.image} 
      style={imageStyle} 
      /> 
      <View style={styles.info}> 
      <Text style={styles.url}>{asset.node.image.uri}</Text> 
      <Text>{location}</Text> 
      <Text>{asset.node.group_name}</Text> 
      <Text>{new Date(asset.node.timestamp).toString()}</Text> 
      </View> 
     </View> 
     </TouchableOpacity> 
    ); 
    }; 

    _onSliderChange = (value) => { 
    const options = CameraRoll.GroupTypesOptions; 
    const index = Math.floor(value * options.length * 0.99); 
    const groupTypes = options[index]; 
    if (groupTypes !== this.state.groupTypes) { 
     this.setState({groupTypes: groupTypes}); 
    } 
    }; 

    _onSwitchChange = (value) => { 
    this.refs[CAMERA_ROLL_VIEW].rendererChanged(); 
    this.setState({ bigImages: value }); 
    }; 
} 

const styles = StyleSheet.create({ 
    row: { 
    flexDirection: 'row', 
    flex: 1, 
    }, 
    url: { 
    fontSize: 9, 
    marginBottom: 14, 
    }, 
    image: { 
    margin: 4, 
    }, 
    info: { 
    flex: 1, 
    }, 
}); 

exports.title = 'Camera Roll'; 
exports.description = 'Example component that uses CameraRoll to list user\'s photos'; 
exports.examples = [ 
    { 
    title: 'Photos', 
    render(): ReactElement<any> { return <CameraRollExample />; } 
    } 
]; 

をしかし、私はシミュレータでこれを実行すると、私は次のエラーを取得:

My-Computer:AwesomeProject david$ react-native log-ios 
Sep 21 10:01:17 My-Computer AwesomeProject[2102] <Error>: [] nw_host_stats_add_src recv too small, received 24, expected 28 
--- last message repeated 1 time --- 
Sep 21 10:01:17 My-Computer AwesomeProject[2102] <Critical>: Unable to resolve module ./CameraRollView from /Users/david/projects/react/react_native/AwesomeProject/index.ios.js: Unable to find this module in its module map or any of the node_modules directories under /Users/david/projects/react/react_native/AwesomeProject/CameraRollView and its parent directories 

    This might be related to https://github.com/facebook/react-native/issues/4968 
    To resolve try the following: 
     1. Clear watchman watches: `watchman watch-del-all`. 
     2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`. 
     3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`. 

を私は彼らが私に言う3つのステップをやってみましたが、彼らは動作しません。これをどうやって解決するのですか?

答えて

2

プロジェクトディレクトリにCameraRollView.jsという別のコンポーネントを作成する必要があります。ここに関連コードがあります:

https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/CameraRollView.js

+0

なぜドキュメントに記載されていませんか? – Philip7899

+0

ありがとう、また私はそれをやってみました。プロジェクトのルートディレクトリにCameraRollView.jsを追加しましたが、まだ同じエラーが表示されます – Philip7899

+0

同じエラーが発生していますか? https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/AssetScaledImageExample.jsから「AssetScaledImageExample.js」を追加してみてください。私はなぜそれがドキュメントにないのか分からない。 – leo7r

関連する問題