React Native：组件之间的通信

Posted 2023-02-23

【中文标题】React Native：组件之间的通信

【英文标题】：React Native : Communicating between components

【发布时间】：2017-03-03 18:19:54

【问题描述】：

完全新人反应原生和编程相似。

跟随 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
     />
      );
   

【参考方案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>
        );
    

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