导航到另一个页面,其中包含本机数据

问题描述

我正在使用react-native和react-navigation v5。我想在函数执行后导航到另一个页面
我正在使用React Native相机。拍照后,我希望应用程序导航到包含图像数据的另一页。有办法吗?

inputs  = [{'segment_id': 826502001,'version': 'v2'},{'segment_id': 827768001,'version': 'v1'}]

def ch():
    
    def function(segment_id,version):
        for item in inputs:
            if item['segment_id'] == segment_id and item['version'] == version:
                return 0
            else:
                return 1
    return function

def main():

    check = ch()
    print(check(827768001,'v1') ) 
    print(check(826502001,'v2'))



if __name__ == "__main__":
    try:
        main()
    except KeyboardInterrupt:
        pass

解决方法

如果CameraComponent是导航的屏幕之一,则应将其作为常规组件,因为它将收到一个navigation参数,您可以像下面这样在导航中使用它:>

class CameraComponent extends Component({navigation}) {
...
  takePicture = async function(camera) {
    const options = { quality: 0.5,base64: true };
    const data = await camera.takePictureAsync(options);
    //  eslint-disable-next-line
    console.log(data.uri);
    navigation.navigate('any-other-page',{
      imgData: data
    });
  };
}

更多信息可以在Moving between screens个react-navigation文档中找到
可以在Passing parameters to routes文档中找到有关传递数据和获取数据的信息


在某些情况下,CameraComponent不会成为导航屏幕的一部分,而是它的子级/嵌套子级。
有三种解决方案:

如果CameraComponent是导航屏幕的直接子元素
然后,您只需将navigation道具传递给孩子,就像这样:

class ParentScreen extends Component({navigation}) {
...
  <CameraComponent navigation={navigation} />
}

,然后像上面一样使用navigation道具。

如果CameraComponent是导航屏幕的深层嵌套子级
这在这里很难解释,但是简而言之,如果您想将react组件保留为类组件,则可以使用react context来做到这一点

如果CameraComponent是导航屏幕的深层嵌套子级
您可以将反应组件更改为功能组件,然后使用更简单的方法:useNavigation Hook,如下所示:

function CameraComponent () {
  const navigation = useNavigation();
...
  takePicture = async function(camera) {
    const options = { quality: 0.5,{
      imgData: data
    });
  };
}```