堆栈导航的怪异行为

时间:2019-07-13 07:23:37

标签: react-native navigation

我有一个具有3个不同屏幕的堆栈导航: 一种。设备清单 b。设备添加 C。设备详细信息

2条差异路径: 1)可以去b。然后去c。 2)可以去c。

当去c。我的成绩很好。标头的headerLeft标题。但是当我去b。我只有“返回”。

我不明白为什么。

这是我的导航堆栈:

const DeviceStackNavigator = createStackNavigator({
    DeviceList: {
        screen: DeviceList,
        navigationOptions: {
            title:  "DeviceList",
        }
    },
    DeviceDetail: {
        screen: DeviceDetail,
        navigationOptions: {
            title:  "Detail",
        }
    },
    DeviceAdd: {
        screen: DeviceAdd,
        navigationOptions: {
            title:  "Add",
        }
    },
});

这是我的DeviceList组件:

class DeviceList extends React.Component {

    constructor(props) {
        super(props);
        this._getDevices();
        // BINDING
        this._goToDevice = this._goToDevice.bind(this);
    }

    _goToDevice(id = number) {
        this.props.navigation.navigate('DeviceDetail', { idDevice: id });
    }
    _goToDeviceAdd() {
        this.props.navigation.navigate('DeviceAdd');
    }

    _getTitle() {
        return 'Title';
    }
    _getDevices() {
        restGet('devices')
            .then(data => {
                const action = { type: "INIT_DEVICE_LIST", value: [] };
                this.props.dispatch(action);
            });
    }

    _displayList() {
        if (!this.state.loading && this.props.devices && this.props.devices.length > 0) {
            return (
                <View style={ styles.main_container }>
                    <FlatList
                        // data={this.state.devices}
                        data={this.props.devices}
                        keyExtractor={(item) => item.id.toString()}
                        renderItem={({item}) => <DeviceItem device={item} goToDevice={this._goToDevice}
                        />}
                    />
                    <TouchableOpacity style={styles.add} onPress={() => this._goToDeviceAdd()}>
                        <FontAwesomeIcon icon={ faPlus } style={ styles.add_icon } size={ 28 } />
                    </TouchableOpacity>
                </View>
            )
        }
    }

    render() {
        return (
            <View style={styles.main_container}>
                {this._displayList()}
            </View>
        );
    }
}

// REDUX
const mapStateToProps = (state) => {
    return {
        devices: state.devices
    };
};

export default connect(mapStateToProps)(DeviceList);

有什么想法吗?

0 个答案:

没有答案