Как получить props моего компонента в navigationOptions?

Question

[Farazendasss]

Компонент принимает определенные пропсы.
Есть navigationOptions , в котором надо получить пропсы компонента ,или доступ к функции компонента. Как это сделать ?

Comments

[Владислав Лысков]

мало знаков вопроса, давай ещё

[Farazendasss]

Владислав Лысков, мне хватает

Answer 1

[Роман Александрович]

наверно это оно https://reactnavigation.org/docs/en/navigation-pro...

Comments

[Farazendasss]

Можете привести пример ,что писать в компоненте ,а что в navigationOptions ?

[Роман Александрович]

Farazendasss, в компоненте пишите

NavigationActions.navigate({
   'Profile',
   {test:true}
});

и в компоненте роута Profile пишите

const name = this.props.navigation.getParam('test', false);  //default value false if test undefined or null

[Farazendasss]

Роман Александрович, не работает ,получаю undefined

[Роман Александрович]

Farazendasss, показывайте код

[Farazendasss]

Компонент

const MainScreen = ({ navigation, image }) => {

    //Эта функция принимает изображение ,преобразовывает его в base64 и отправляет на сервер ,а результат записывает в state
    const getCategory = async () => {

        const send = new FormData();
        ImageResizer.createResizedImage(image, 600, 600, 'JPEG', 100)
            .then((res) => RNFS.readFile(res.uri, 'base64'))
            .then((res) => {

                let string = 'data:image/jpeg:base64,'.concat(res);
                send.append('link', string);
                return axios.post('https://api', send)
            })
            .then(res => {

                const array = Object.values(res.data)
                categoryList(array);

            })

        navigation.navigate('Category')
    }


    return (
        <View style={styles.container}>
            <PhotoPicker getCategory={getCategory} />
        </View>
    )
}

Тут надо получить image , или доступ к функции компонента

MainScreen.navigationOptions = ({ navigation }) => {

    return {
        headerTitle: 'Фильтр поиска',
        headerRight: () => (
            <TouchableOpacity activeOpacity={0.7} onPress={() => console.log(image !== undefined ? image : <Text>image</Text>)} >
                <HeaderButtons>
                    <Button
                        color='#BA5C06'
                        size={10}
                        title="Очистить" />
                </HeaderButtons>
            </TouchableOpacity>
        )
    }
}

[Роман Александрович]

Farazendasss,

const MainScreen = ({ navigation, image }) => {

    //Эта функция принимает изображение ,преобразовывает его в base64 и отправляет на сервер ,а результат записывает в state
    const getCategory = async () => {
let string = ''
        const send = new FormData();
        ImageResizer.createResizedImage(image, 600, 600, 'JPEG', 100)
            .then((res) => RNFS.readFile(res.uri, 'base64'))
            .then((res) => {

                string = 'data:image/jpeg:base64,'.concat(res);
                send.append('link', string);
                return axios.post('https://api', send)
            })
            .then(res => {

                const array = Object.values(res.data)
                categoryList(array);

            }).then(()=>navigation.navigate('Category',{image:string}))

        
    }


    return (
        <View style={styles.container}>
            <PhotoPicker getCategory={getCategory} />
        </View>
    )
}

MainScreen.navigationOptions = ({ navigation }) => {
const image = this.props.navigation.getParam('image', ''); 
    return {
        headerTitle: 'Фильтр поиска',
        headerRight: () => (
            <TouchableOpacity activeOpacity={0.7} onPress={() => console.log(image !== undefined ? image : <Text>image</Text>)} >
                <HeaderButtons>
                    <Button
                        color='#BA5C06'
                        size={10}
                        title="Очистить" />
                </HeaderButtons>
            </TouchableOpacity>
        )
    }
}

[Farazendasss]

Параметры передадутся только по переходу на страницу категорий .А мне надо на этой же странице получить данные.
Получается у пользователя есть выбор ,или перейти на страницу категорий ,или нажать кнопку очистить ,и удалить изображение .Но что бы удалить кнопку ,мне надо по клику ,задать ей значение null. Соответственно надо получить ее в navigationOptions

[Роман Александрович]

Farazendasss,

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    
    return {
      title: params ? params.otherParam : 'A Nested Details Screen',
    }
  };

  render() {
    /* 2. Read the params from the navigation state */
    const { params } = this.props.navigation.state;
    const itemId = params ? params.itemId : null;
    const otherParam = params ? params.otherParam : null;

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
        <Button
          title="Update the title"
          onPress={() => this.props.navigation.setParams({otherParam: 'Updated!'})}
        />
      </View>
    );
  }
}

[Farazendasss]

Роман Александрович, Может в двух словах что тут происходит ?Мы перенесли navigationOptions в компонент ?В каком виде мы передаем const { params} = navigation.state; ?

[Роман Александрович]

Farazendasss, this.props.navigation.setParams({otherParam: 'Updated!'}) фнкция отправки в которой мы заносим значение Update с ключем otherParam.

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    
    return {
      title: params ? params.otherParam : 'A Nested Details Screen',
    }
  };

const { params } = this.props.navigation.state; обект в который прилетают данные
const otherParam = params ? params.otherParam : null; проверка есть ли данные
Вроде бы ничего супер сложного

[Farazendasss]

Роман Александрович, спасибо