react-navigation navigationOptions标题中的组件无法访问redux属性

时间:2018-06-19 10:53:46

标签: reactjs react-native react-redux react-navigation

我有一个<TextElement>组件,它根据设置的语言显示不同的静态文本。多语言文本JSON和当前语言在Redux商店中设置。

我希望此<TextElement>组件在页面标题的标题中工作,即在navigationOptions中。但是this.props.textsthis.props.language未定义,这是组件中通常使用的。我尝试here上的解决方案无济于事。

class PreviousBookingsList extends Component {

    static navigationOptions = function (props) {
        return {
            title: <TextElement textId={2} texts={this.props.texts} language={this.props.language} />,
            headerRight: <Icon name="menu" color='#fff' iconStyle={styles.menuIcon} underlayColor='transparent'
                               size={30} onPress={() => props.navigation.openDrawer()}/>
        }
    };

    render() {
        const data = this.props.data;

        const villaList = data.PreviousBookings.map(function(villa) {
            return (
                <Villa key={villa.VillaName} {...villa} />
            );
        });

        return (
            <View style={styles.mainBg}>
                <ScrollView>
                    {villaList}
                </ScrollView>
            </View>
        );
    }
}

function mapStateToProps(state) {
    return {
        texts: state.textsReducer.texts,
        data: state.dataReducer.data,
        language: state.languageReducer.language
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(Actions, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(PreviousBookingsList);

任何帮助表示感谢。

0 个答案:

没有答案