React Native param не обновляется - PullRequest
Новая
       23

React Native param не обновляется

0 голосов
/ 08 июля 2019

Я передаю параметры с помощью экрана навигации, чтобы отобразить конкретный экран на основе значения параметра. У меня есть пустое состояние на экране, который хранит входящий параметр, но состояние не обновляется. Метод рендеринга отображает параметр условия else, поскольку он получает только начальное состояние пустым.

Вот мой код:

Home.js 

import React, { Component } from 'react'
import { Text, View, TouchableOpacity, StyleSheet, Image, ImageBackground } from 'react-native'

const bgImage = require('../../assets/background.png')


export default class Home extends Component {

    render() {

        const {navigate} = this.props.navigation;
        return (
            <ImageBackground source={bgImage} style={{width: '100%', height: '100%'}}>
                <View style={styles.overlay}>
                    <TouchableOpacity style={{marginVertical: 15}} 
                    onPress={()=>navigate('Dashboard', {param:'sales'})}>
                    <Image 
                        source={require('../../assets/sales.png')}
                        style={{borderRadius: 20, width: 300, height: 90}}
                    />
                    </TouchableOpacity>

                    <TouchableOpacity 
                    onPress={()=>navigate('Dashboard', {param:'claims'})}>
                    <Image
                        source={require('../../assets/claims.png')}
                        style={{borderRadius: 20, width: 300, height: 90}}
                    />
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        )
    }
}


const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "#f5fcff",

    },
    overlay: {
        flex:1,
        backgroundColor:'rgba(0, 0, 0, 0.7)',
        justifyContent: 'center',
        alignItems: 'center'
    }
  });

Dashboard.js 

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import SalesDashboard from './SalesDashboard';
import ClaimsDashboard from './ClaimsDashboard';


export default class Dashboard extends Component {

    constructor(props) {
        super(props)

        this.state = {
            paramName: ''
        }
    }

    componentDidMount(){
        const paramName = this.props.navigation.getParam('param');
        this.setState({paramName});
        console.log(this.state.paramName)
    }


    render() {
        return (
            <View>
                {this.state.paramName === 'sales'? <SalesDashboard />: <ClaimsDashboard /> }

            </View>
        )
    }
}

Независимо от того, какой параметр я передаю, он всегда отображает ApplicasDashboard Только экран.

Пожалуйста, помогите решить эту проблему

Ответы [ 2 ]

1 голос
/ 08 июля 2019

componentDidMount не то место, куда можно поместить этот кусок кода. Он будет запускаться только один раз, когда реагирует на монтирование страницы, и вы должны заметить, что реакция не монтирует новую страницу при каждом переходе к экрану. Итак, попробуйте поместить const paramName = this.props.navigation.getParam('param'); в вашу функцию рендеринга, и нет необходимости хранить эту информацию о состоянии.

Если вы настаиваете на выполнении какой-либо инициализации при переходе на экран Dashboard, вы можете прослушать событие didFocus согласно документам .

0 голосов
/ 08 июля 2019

Как уже было сказано, componentDidMount не будет обновляться, так как запускается только при первом рендеринге компонента.

Чтобы получить новые параметры, вы можете использовать componentDidUpdate и проверить предыдущие реквизиты с новыми..

пример: 

componentDidUpdate(prevProps){
   if(this.props.navigation.getParam('param')!==prevProps.navigation.getParam('param')){
       //do what you need
    }
}

Редактировать.

Если вы не нашли параметр с помощью getParam, попробуйте найти его внутри this.props.navigation.state.params

...