完成新手以对原生和编程做出反应。
跟随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}
/>
);
}
}
答案 0 :(得分:0)
我认为你的A---C0---B---C1’---C2’---...---C30’---D---...---X develop
\
C1---C2---...---C30 develop-2
课程有点偏僻。试试这个:
GeolocationExample
将您的导入和样式保存在此处的顶部和底部。