Question

完成新手以对原生和编程做出反应。

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

这是我关注的教学点的链接：

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

唯一的区别是我的index.android.js有一个可滚动的标签视图，因此“演示组件”是其中一个标签。

GeolocationExample和HomeContainer都位于名为“app”的同一文件夹中。我的问题是HomeContainer似乎没有通过props将变量initialposition和lastposition传递给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

我认为你的A---C0---B---C1’---C2’---...---C30’---D---...---X develop \ C1---C2---...---C30 develop-2课程有点偏僻。试试这个：

GeolocationExample

将您的导入和样式保存在此处的顶部和底部。

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

1 个答案: