React Native：在组件之间进行通信

Question

完整的新手，可以对本机和编程进行反应。

跟随TutorialPoint中的教程一起进行，并尝试通过道具将数据从一个组件传递到另一个组件。 我一生无法弄清为什么它不起作用，并希望有人能指出正确的方向。

这是我正在关注的tutorialspoint的链接：

https://www.tutorialspoint.com/react_native/react_native_geolocation.htm

唯一的不同是，我的index.android.js具有可滚动的标签视图，因此“表示组件”是标签之一。

GeolocationExample和HomeContainer都在一个名为“ app”的文件夹中。 我的问题是HomeContainer似乎没有通过道具将变量的初始位置和最终位置传递给GeolocationExample。 我尝试运行时只看到一个空白屏幕，显示初始位置和LastPosition：

哦，我已经更改了android清单，使其包含访问精细位置的权限，所以这不是问题。

请先谢谢你！！

这是index.android.js

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
ScrollView,
Navigator,
View
} from 'react-native';

import ScrollableTabView, { ScrollableTabBar, }  from 'react-native-scrollable-tab-view';
import GeolocationExample from './app/GeolocationExample';

export default class test extends Component {
  render() {
return (
<ScrollableTabView
  tabBarPosition='bottom'
  initialPage={0}
  renderTabBar={() => <ScrollableTabBar/>}
  tabBarUnderlineColor='#123456'
  tabBarBackgroundColor='#FFFFFF'
  tabBarActiveTextColor='#4682b4'
  tabBarInactiveTextColor='#696969'
  tabBarTextStyle={{fontSize: 14,fontWeight: "bold"}}>

  <Welcome tabLabel='Welcome' />
  <GeolocationExample tabLabel='LocationTest'/>

</ScrollableTabView>

    );
  }
}


AppRegistry.registerComponent('test', () => test);

这是GeolocationExample.js

import React, { Component } from 'react';
import {
 Text,
 View,
 StyleSheet
} from 'react-native';

export default GeolocationExample = (props) => {
 return (
  <View style = {styles.container}>

     <Text>
        <Text style = {styles.boldText}>
           Initial position:
        </Text>
        {props.initialPosition}
     </Text>
     <Text>
        <Text style = {styles.boldText}>
           Current position:
        </Text>
        {props.lastPosition}
     </Text>

  </View>
 );
}

const styles = StyleSheet.create ({
container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  marginTop: 70
},
boldText: {
  flex: 1,
  fontWeight: 'bold'
}
});

最后是HomeContainer

import React, { Component } from 'react'
import GeolocationExample from './GeolocationExample'

export default class HomeContainer extends Component {

 constructor() {
  super();
  this.state = {
     initialPosition: 'unknown',
     lastPosition: 'unknown'
  }
}
 watchID = (null: ?number);

componentDidMount = () => {
  navigator.geolocation.getCurrentPosition(
     (position) => {
        var initialPosition = JSON.stringify(position);
        this.setState({initialPosition});
     },
     (error) => alert(error.message),
     {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
  );
  this.watchID = navigator.geolocation.watchPosition((position) => {
     var lastPosition = JSON.stringify(position);
     this.setState({lastPosition});
  });
}
componentWillUnmount = () => {
  navigator.geolocation.clearWatch(this.watchID);
}

render() {
  return (
     <GeolocationExample
        initialPosition = {this.state.initialPosition}
        lastPosition = {this.state.lastPosition}
     />
      );
   }
}

Answer 1

我认为您的GeolocationExample类还差一点。 尝试这个：

export default GeolocationExample extends Component {
    render() {
        return (
            <View style = {styles.container}>
                <Text>
                    <Text style = {styles.boldText}>
                        Initial position:
                    </Text>
                    {this.props.initialPosition}
                </Text>
                    <Text style = {styles.boldText}>
                        Current position:
                    </Text>
                    {this.props.lastPosition}
                </Text>
            </View>
        );
    }
}

像以前一样，将导入和样式保持在顶部和底部。