Передача данных в React Navigation с использованием setParam и getParam

Question

Я пытаюсь отправить изображение или данные в другой навигатор стека, используя getParams и setParams.

В GalleryScreen для выбранного изображения будет установлено состояние pickedImage, а затем I * 1004. * состояние pickedImage, и я передаю его параметру navigate(screen), {here}. Затем на другом экране я getParam(submitFn) затем перехожу к моему Image source={getImage}

Я думаю, что я ошибся, это часть setImageData, потому что я думаю, что это не вызовет setParams?

GalleryScreen.js:

class GalleryScreen extends React.Component {
  state = {
    photos: [],
    index: null,
    pickedImage: null
  };

  setImageData = () => {
    this.props.navigation.setParams({submitImage: this.state.pickedImage});
  }


  getPhotos = () => {
    CameraRoll.getPhotos({
      first: 1000,
      assetType: 'All',
      groupTypes: 'Event'
    })
    .then(res => {
      this.setState({ 
        photos: res.edges,
      });
    })
    .catch((err) => {
      console.log('Error image: ' + err);
    });
  };

  render() {
    return (
        <View style={styles.container}>
            <StatusBar backgroundColor="white"/>
            <Image source={{uri: this.state.pickedImage}} style={styles.image}/>
            <ScrollView contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}>
                {this.state.photos.map((photos, index) => {
                    return(
                        <TouchableHighlight 
                            style={{opacity: index === this.state.index ? .5 : 1}}
                            onPress={() => this.setState({pickedImage: photos.node.image.uri})}
                            key={index}
                            underlayColor='transparent'
                        >
                            <Image
                                style={{width: width / 3, height: width / 3}}
                                source={{uri: photos.node.image.uri}}
                                resizeMode='cover'
                            />
                        </TouchableHighlight>
                    );
                })}
            </ScrollView>
        </View>
    );
  }     

}

GalleryScreen.navigationOptions = navData => {
const submitFn = navData.navigation.getParam('submitImage');
return {
    headerTitle: 'Gallery',
    headerStyle: {
        paddingTop: 20,
        height: 75
    },
    headerRight: () => (
        <HeaderButtons HeaderButtonComponent={HeaderButton}>
            <Item
                // title="Cart"
                iconName="md-arrow-forward"
                onPress={() => {
                    navData.navigation.navigate('EventInput', {
                        submitFn
                    })
                }}
            />
        </HeaderButtons>
    )
};

};

EventInput.js:

render(){
  const getImage = this.props.navigation.getParam('submitFn');
  return (
    <Image source={{uri: getImage}} style={styles.image}/>
  );
}

Answer 1

Правильный способ сделать это:

1. создать метод для GalleryScreen, который будет отвечать за переход к следующему экрану и передачу параметра навигации с выбранным изображением
2. добавить этот методк параметрам навигации с помощью setParams, чтобы иметь возможность вызывать его из заголовка
3. вызывать его из заголовка

.

constructor(props) {
  ...
  // pass this method to navigation params to be able to call it from header
  this.props.navigation.setParams({ goToEventInput: this.goToEventInput })
}

// add this method
goToEventInput = () => {
  this.props.navigation.navigate('EventInput', { image: this.state.pickedImage })
}

// inside header: call the method
<Item
  iconName="md-arrow-forward"
  onPress={() => navData.getParam('goToEventInput')())
/>