Question

我将参数与导航屏幕一起传递，以根据参数值渲染特定屏幕。我在存储输入参数的屏幕中有一个空状态，但是状态没有更新。 render方法正在渲染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>
        )
    }
}

无论我通过什么参数，它始终仅呈现 claimsDashboard 屏幕。

请帮助解决此问题

Answer 1

componentDidMount不是放置这段代码的适当位置。当react装入页面时，它将仅运行一次，并且您应注意，每次导航到屏幕时，react不会装入新页面。因此，请尝试将const paramName = this.props.navigation.getParam('param');放在渲染函数上，而无需在状态上存储此信息。

如果在移动到仪表板屏幕时坚持进行某种初始化，则可以按照docs收听didFocus事件。

Answer 2

正如已经说过的那样，componentDidMount不会更新，因为它仅在您首次呈现组件时运行。

要获取新的参数，可以使用componentDidUpdate并用新的道具检查以前的道具。

示例：

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

编辑。

如果您没有使用getParam找到参数，请尝试在this.props.navigation.state.params内找到它

Answer 3

您需要在组件的 render() 方法中使用以下语句更新参数：

const {navigation} = this.props;

navigation.setParams({
   param:'new value',
})

里面的render()方法是最重要的部分。

React Native参数未更新

3 个答案: