React Native : 모듈을 해결할 수 없습니다 ./CameraRollView

Question

React Native를 처음 사용했습니다. ReactNative가 웹 사이트에 가지고있는 cameraroll example을 구현하는 것입니다. 내가 정확히 자신의 코드를 복사 한

그러나

'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 개 단계를하고 노력을하지만, 그들은 작동하지 않습니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

프로젝트 디렉토리에 CameraRollView.js이라는 다른 구성 요소를 만들어야합니다. 당신은 여기에 관련된 코드를 찾을 수 있습니다

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