按钮调用另一个.js文件

Question

以下是我在第一个屏幕上按下按钮时要调用的第二个文件的内容。

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


export default class webCam extends Component {
  state = {
    data: []
  };

  // called whenever component is mounted and can fetch data here
  componentWillMount() {
    this.fetchData();
  }


  fetchData = async () => {
    const response = await fetch('https://web6.seattle.gov/Travelers/api/Map/Data?zoomId=18&type=2');
    const json = await response.json();
    this.setState({ data: json.Features });
  };


  render() {

    return (

      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          // x is the object and i is the index
          keyExtractor={(x, i) => i.toString()}
          renderItem={ ({item}) =>

            <View style={styles.textM}>
             <Image
                source = {{ uri: 'http://www.seattle.gov/trafficcams/images/' + item.Cameras[0].ImageUrl }}
                style = {{height: 250, margin: 3}}
                />

              <Text style={{fontSize: 20, color: 'black'}}>
                {`${item.Cameras[0].Description}`}
              </Text>
            </View>

          }
         />
      </View>

    );
  }

}

const styles = StyleSheet.create({
  container: {
    marginTop: 15,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  textM: {
    marginBottom: 30
  }
});

以下是我的第一个包含按钮的文件的代码：

import React, { Component } from 'react';
import webcam from './webcamComponent'
import {
  Platform,
  StyleSheet,
  Text,
  Image,
  View,
  ToolbarAndroid,
  FlatList,
  Alert,
  Button
} from 'react-native';
import webCam from './webcamComponent';


export default class App extends Component {

  render() {

    return (

      <View style={styles.container}>
        <View style={{margin: 20}}>


           <View>
           <ToolbarAndroid
            title={"Hello"}
            style={{
                height: 56,
                alignSelf: "stretch",
            }}
            onIconClicked={this.props.openDrawer}

        />
      </View>

      <View>
{/*         <Button
  onPress={() => {
    Alert.alert('HELLO!');
  }}
  title="CAMERAS"
/> */}

<Button
  onPress={webCam}
  title="CAMERAS"
  color="#841584"

/>
      </View>
    </View>
    </View>
    );
  }
}


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

如何使用此按钮从第一个文件中调用第二个文件：

<Button
  onPress={webCam}
  title="CAMERAS"
  color="#841584"

/>

崩溃了应用。 “试图分配给只读属性。”

不确定是否重要，但文件位于同一文件夹级别。