Question

StackNavigator的我的navigationOptions是： -

static navigationOptions = ({navigation}) => {
    return ({
        headerRight: (
            (navigation.state.params.actionTitle)?
                <TouchableOpacity style={{padding: 10}} onPress={() => navigation.state.params.onPressDelete()}>
                    <Text style={{
                        fontSize: 16,
                        color: Colors.primaryText
                    }}>{navigation.state.params.actionTitle}</Text>
                </TouchableOpacity>:null
        )
    })
};

默认情况下，

navigation.state.params.actionTitle 是未定义的。所以在页面lode上它不会显示headerRight视图。我想根据redux的一些网络响应显示headerRight视图。我正在处理 componentWillReceiveProps 部分中的redux数据。

但是从 componentWillReceiveProps ，如果我尝试更改actionTitle，则会发生递归，整个UI都会阻塞。通过递归我的意思是重复调用componentWillReceiveProps。我正在使用以下方式设置导航状态： -

componentWillReceiveProps(props){
  this.props.navigation.setParams({
        actionTitle : "Delete"
  });
}

我在这里做错了什么？

Answer 1

您可以尝试使用如此连接的redux制作自定义组件

// Header.js
import { connect } from 'react-redux'
import React from 'react'
import {View, Text} from 'react-native'

    const Header = ({name}) => {
        return (
            <View  style={{alignItems: 'center', justifyContent: 'center'}}>
                <Text>{name}</Text>
            </View>
        )
    }

    // REDUX MAPPING
    const mapStateToProps = state => ({
        name: state.auth.name
    })

    export default connect(mapStateToProps, null)(Header);

并在您的组件中将其用作

import Header from '../../Components/Header'

// Inside your class

 static navigationOptions = ({ navigation }) => {
        return {
            headerRight: <Header />,
        }
    }

Answer 2

为每个状态调用componentWillReceiveProps并对props进行更改，这就是为什么它会重新渲染多次。尝试根据您的网络响应更新导航标题。

检查道具是否有标题更改，如果道具包含网络响应，则只更新标题，即在您的情况下删除。

if(props.header === "Delete") {  // assuming you are passing as header in redux
  this.props.navigation.setParams({
    actionTitle : "Delete"
  });
}

在React Native

2 个答案: