Question

我有一张地图，其某个地区为其州;在此示例中，它呈现给当前用户位置。我想添加一个按钮（第二段代码）来修改这个地图的状态，并将地图带回用户的当前位置，但是在不同的文件中保持模块化。我怎么能这样做？有没有办法通过国家？新的反应原生，我不确定继承是如何工作的。谢谢！

 const defaultRegion = {
  latitude: 37,
  longitude: -122,
  latitudeDelta: 0.003,
  longitudeDelta: 0.003,
};

const getCurrentLocation = () => {
  return new Promise<Position>((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(position => resolve(position), e => reject(e));
  });
};

class Map extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      region: defaultRegion,
    };
  }

  componentDidMount() {
    return getCurrentLocation().then(((position) => {
      if (position) {
        this.setState({
          region: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: 0.003,
            longitudeDelta: 0.003,
          },
        });
      }
    }));
  }

  render() {
    return (
      <MapView
        style={styles.map}
        showsUserLocation={true}
        region={this.state.region}
      />
    );
  }
}

新课程

class CenterButton extends React.Component {
  render() {
    return (
    <TouchableOpacity style={styles.button} onPress={pressedButton}>
      <Text>
        Press me to go back to your location!
      </Text>
    </TouchableOpacity>
    );
  }
}

const pressedButton = () => {
  console.log('this should take me back!');
};

Answer 1

通常如下所示：

父类将一个函数（'回调函数'）作为prop类传递给子类
子类使用此回调函数prop，在本例中为onPress事件处理程序
按下该按钮时，将调用父函数的callBack并更改状态。

Answer 2

扩展模块化部件，您可以在Map组件中创建一个函数：

const setCurrentLocation = () => { 
getCurrentLocation().then(((position) => {
 if (position) {
 this.setState({ region:
 { latitude: position.coords.latitude, longitude: position.coords.longitude, latitudeDelta: 0.003,
 longitudeDelta: 0.003} 
}); 
} 
));
}

然后在componentDidMount中使用：

componentDidMount (){

this.setCurrentLocation();

}

现在将Map组件中的子组件导入为：

import CenterButton from 'path/to/component'

在Map组件的渲染功能中添加：

render(){

<div>
<Mapview..../>
<CenterButton pressButton={this.setCurrentLocation}/>
</div>

}

现在，在您的CentreButton中，将pressedButton的代码（包含在您的组件中）更改为：

const pressedButton = () => { console.log('this should take me back!');
  const {pressButton} = this.props;
  pressButton();
 };

我希望这会有所帮助。

修改：同时更改CentreButton组件中的以下代码：

.....onPress={this.pressedButton}>

如何从反应原生的不同组件修改组件的状态

2 个答案: