Android React Native：组件之间的通信

完全是新来者，对本地和编程都有同样的反应

跟随TutorialPoint中的教程，并试图通过道具将数据从一个组件传递到另一个组件。我一辈子都不明白为什么它不起作用，我希望有人能给初学者指出正确的方向

这是我所关注的教程要点的链接：

唯一的区别是，my index.android.js有一个可滚动的选项卡视图，因此“presentation component”是其中一个选项卡

GeolocationExample和HomeContainer都位于名为“app”的同一文件夹中。我的问题是HomeContainer似乎没有通过props将变量initialposition和lastposition传递给GeolocationExample。尝试运行时，我看到的只是一个带有初始位置和最后位置的空白屏幕：

哦，我已经更改了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);

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
滚动视图，
领航员，
看法
}从“反应本机”；
从“react native scrollable tab view”导入ScrollableTabView，{ScrollableTabBar，}；
从“/app/GeolocationExample”导入GeolocationExample；
导出默认类测试扩展组件{
render（）{
返回(
}
tabBarUnderlineColor='#123456'
tabBarBackgroundColor='#FFFFFF'
tabbarActivatextColor='#4682b4'
tabBarInactiveTextColor='#696969'
tabBarTextStyle={{fontSize:14，fontWeight:“bold”}>
);
}
}
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'
}
});

import React，{Component}来自'React'；
进口{
文本，
看法
样式表
}从“反应本机”；
导出默认地理位置示例=（道具）=>{
返回(
初始位置：
{props.initialPosition}
当前职位：
{props.lastPosition}
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
玛金托普：70
},
黑体字：{
弹性：1，
fontWeight:“粗体”
}
});

最后是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}
     />
      );
   }
}

import React，{Component}来自“React”
从“/GeolocationExample”导入GeolocationExample
导出默认类HomeContainer扩展组件{
构造函数（）{
超级（）；
此.state={
initialPosition:'未知'，
最后位置：“未知”
}
}
watchID=（空：数字）；
componentDidMount=（）=>{
navigator.geolocation.getCurrentPosition(
（职位）=>{
var initialPosition=JSON.stringify（位置）；
this.setState（{initialPosition}）；
},
（错误）=>警报（错误消息），
{enableHighAccurance:true，超时：20000，最大值：1000}
);
this.watchID=navigator.geolocation.watchPosition（（位置）=>{
var lastPosition=JSON.stringify（位置）；
this.setState（{lastPosition}）；
});
}
组件将卸载=（）=>{
navigator.geolocation.clearWatch（this.watchID）；
}
render（）{
返回(
);
}
}

我认为你的

地理位置示例

课程有点不对劲。试试这个：

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>
        );
    }
}

导出默认地理位置示例扩展组件{
render（）{
返回(
初始位置：
{this.props.initialPosition}
当前职位：
{this.props.lastPosition}
);
}
}

像以前一样，将导入内容和样式放在顶部和底部